Creating Smooth Accordion with CSS Transitions

Creating an accordion using CSS transitions involves using HTML, CSS, and some JavaScript to create collapsible content that can expand and collapse with smooth animations.

Here's a step-by-step overview of how you can create an accordion using CSS transitions:

HTML Structure : Start by setting up the HTML structure for your accordion. Typically, an accordion consists of a container element that holds multiple sections or panels, each containing a header and a content area. For example:

<div class="container">
<div class="item">
  <a href="#tab1" class="title">Title-1</a>
  <div id="tab1"  class="content">
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto nihil harum totam repellat autem quisquam ratione beatae voluptates cumque! Dicta?</p>
  </div>
</div>
<div class="item">
    <a href="#tab2" class="title">Title-2</a>
    <div id="tab2" class="content">
          <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto nihil harum totam repellat autem quisquam ratione beatae voluptates cumque! Dicta?</p>
    </div>
</div>
<div class="item">
      <a href="#tab3" class="title">Title-3</a>
      <div id="tab3"  class="content">
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto nihil harum totam repellat autem quisquam ratione beatae voluptates cumque! Dicta?</p>
      </div>
</div>
</div>

CSS Styling : Apply CSS styles to structure and style the accordion. You can use CSS to set the initial state of the accordion, such as hiding the content panels and applying styles to the headers and content areas. For example:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
	*{
	  font-family: 'Poppins', sans-serif;
	  margin: 0;
	  padding: 0;
	  box-sizing: border-box;
	}
	a{
	  text-decoration: none;
	}
	body{
	    height: 100vh;
	    width: 100vw;
	    background-color: #dfe4ea;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	}
	.container{
	    border: 1px solid #e0e0e0;
	    max-width: 600px;
	    background-color:white;
	}

CSS Transitions : Finally, use CSS transitions to create smooth animations for the accordion. By applying CSS transitions to the desired CSS properties, such as max-height, you can control the speed and easing of the animation. For example, the ease timing function can be used for a smooth, natural-looking animation. You can also customize the duration and timing function of the transition to achieve the desired effect. For example:

.content{
    overflow: hidden;
    max-height: 0px;
    transition: max-height 0.5s ease;
}
.content p{
    padding: 15px;
}
.content:target{
    max-height: 150px;
}

.title{
    display: block;
    padding: 10px;
    font-size: 1em;
    background-color: #2f3542;
    color:white;
    border: 1px solid #57606f;
    transition: background-color 0.5s;
}
.title:hover{
    background-color: #747d8c;
}

With the above steps, you can create an accordion with smooth animations using CSS transitions. Users can click on the headers to expand or collapse the content panels with a visually appealing animation effect, enhancing the interactivity and user experience of your website or web application.

Source Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
    *{
      font-family: 'Poppins', sans-serif;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    a{
      text-decoration: none;
    }
    body{
      height: 100vh;
      width: 100vw;
      background-color: #dfe4ea;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .container{
      border: 1px solid #e0e0e0;
      max-width: 600px;
      background-color:white;
    }
    .content{
      overflow: hidden;
      max-height: 0px;
      transition: max-height 0.5s ease;
    }
    .content p{
      padding: 15px;
    }
    .content:target{
      max-height: 150px;
    }

    .title{
      display: block;
      padding: 10px;
      font-size: 1em;
      background-color: #2f3542;
      color:white;
      border: 1px solid #57606f;
      transition: background-color 0.5s;
    }
    .title:hover{
      background-color: #747d8c;
    }
  </style>
</head>
<body>
      <div class="container">
       <div class="item">
          <a href="#tab1" class="title">Title-1</a>
          <div id="tab1"  class="content">
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto nihil harum totam repellat autem quisquam ratione beatae voluptates cumque! Dicta?</p>
          </div>
       </div>
       <div class="item">
            <a href="#tab2" class="title">Title-2</a>
            <div id="tab2" class="content">
                  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto nihil harum totam repellat autem quisquam ratione beatae voluptates cumque! Dicta?</p>
            </div>
        </div>
        <div class="item">
              <a href="#tab3" class="title">Title-3</a>
              <div id="tab3"  class="content">
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto nihil harum totam repellat autem quisquam ratione beatae voluptates cumque! Dicta?</p>
              </div>
        </div>
      </div>
</body>
</html>

Creating Smooth Accordion with CSS Transitions

Source Code

CSS Tutorial

Properties Reference

Cascading Style Sheet

Flexbox Tutorial

CSS Grid Tutorial

Transitions Properties

CSS Properties with Examples

CSS Selectors

CSS Pseudo Elements

CSS Attribute Selectors

Input Pseudo Classes

CSS Examples

CSS Animation Projects