CSS Accordion

An accordion is a collapsible content. Accordions are useful when you want to toggle between hiding and showing a large amount of text or graphic content. They are often used to create FAQs.

Setup

To create an accordion, you need an HTML that includes a container (.accordion) with items elements (.item), which in their turn include question (.accordion__question) and answer (.accordion__answer) elements.

    
        
<div class="accordion">
    <h1></h1>
    <div class="accordion__item">
        <div class="accordion__question">
            <h2></h2>
        </div>
        <div class="accordion__answer">
            <p></p>
        </div>
    </div>
</div>
    

Next, add some CSS rules to style your question and answer elements. Here is an example:

    
        
.accordion {
  min-width: 360px;

  &__item {
    margin-bottom: 30px;
  }

  &__question {
    position: relative;
    background: $gradient_left;
    border-radius: 15px 15px 0 0;
    padding: 8px 15px 8px 40px;
    font-size: 1em;
    cursor: pointer;
  }

  // Note: hidden by default
  &__answer {
    display: none;
    margin-top: 10px;
    padding: 10px 40px 0;
  }
}
    

You may also need to add icons to your question elements to indicate that your content is expandable. To add a V-symbol, use the following rules:

    
        
&__question::before {
  content: '';
  display: inline-block;
  border: solid #555;
  border-width: 0 2px 2px 0;
  padding: 3px;
  position: absolute;
  top: 40%;
  right: 50px;
  transform: rotate(45deg);
  transition: transform .2s linear;
}
    

You’ll want this V-symbol to transform into the caret-symbol (^) upon clicking on the question element and expanding the content. To transform the symbol, add the .expanded class and use the following rules:

    
        
.expanded.accordion__question::before {
  content: '';
  border: solid #555;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 3px;
  position: absolute;
  top: 50%;
  right: 50px;
  transform: rotate(-135deg);
  transition: transform .2s linear;
}
    

Another popular version of icons for this purpose are plus and minus symbols (+/-):

    
        

.accordion__question::before {
  content: '\02795'; /* Unicode character for "plus" sign (+) */
  font-size: 13px;
  color: #777;
  float: right;
  margin-left: 5px;
}

.expanded.accordion__question::before {
  content: "\2796"; /* Unicode character for "minus" sign (-) */
}
    

Accordion with jQuery

To bring your accordion to life, you need to use jQuery or JavaScript. We’ll start with jQuery. Here is what your code should do:

• Show the first answer
• Add the .expanded class to the first expanded answer
  
• Add a clicking event
  
• Show the answer by adding the .expanded class to the parent question element that was clicked on
  
• Hide the previous answer by removing the .expanded class
  
• Toggle (hide and show) the answer by clicking on the question element
  
• Add animation so that the answers would show and hide smoothly
  

Here is the jQuery code that does all that:

    
        
$(function() {
    // Show the first answer
    $('.accordion__answer:first').show();
    // Add the .expanded class to the first expanded answer
    $('.accordion__question:first').addClass('expanded');

    // Add a clicking event
    $('.accordion__question').on('click', function() {
        var answer = $(this).next();

	   // Show the answer by adding the .expanded class to the parent question element that was clicked on
        $('.accordion__answer').not(answer).slideUp(400);
        // Hide the previous answer by removing the .expanded class
        $('.accordion__question').not(this).removeClass('expanded');
        // Toggle (hide and show) the answer by clicking on the question element
        $(this).toggleClass('expanded');
        // Add animation so that the answers would show and hide smoothly
        answer.slideToggle(400);
    });
});
    

Demo:

Accordion with JavaScript

Alternatively, you can use pure JavaScript instead of jQuery to animate your accordion. You’ll need to slightly alter the CSS rules from the Setup section.

Change styles of the .accordion__answer element this way to add zero opacity and zero height, as well as add transition for smoother appearance:

    
        
.accordion__answer {
  // display: none;
  opacity: 0;
  height: 0;
  overflow: hidden;
  transition: opacity 0.2s ease-out;
}
    

Next, change the opacity and height values in an expanded state by adding the following CSS rules for the .accordion__answer element:

    
        
.expanded .accordion__answer {
  opacity: 1;
  height: auto;
}
    

To make your accordion work properly, add the JavaScript code below.

    
        
var items = document.getElementsByClassName('accordion__item');

for (i = 0; i < items.length; i++) {
    items[i].addEventListener('click', function() {
        // If the current element is already expanded, collapse it and do nothing else (return)
        if (this.classList.contains('expanded')) {
            this.classList.remove('expanded');
            return;
        }

        // Is there an expanded element?
        let expandedItem = document.getElementsByClassName('expanded')[0] || null;
        // If so, collapse it
        if (expandedItem) {
            expandedItem.classList.remove('expanded');
        }

        // Expand the current element
        this.classList.add('expanded');
    });
}
    

Demo:

Pure CSS Accordion

To create an HTML accordion without JavaScript or jQuery, use input and label elements, and change the max-height property when the inputs are in the :checked state.

Demo: