How to Create: Collapsible Content/Accordion

Learn how to create an accordion (collapsible content).

Accordion

The accordion is very useful when you want to switch between hiding and showing a large amount of content:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Try It Yourself

Create an accordion

Step 1 - Add HTML:

<button class="accordion">Section 1</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 2</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 3</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>

Step 2 - Add CSS:

Set the accordion styles

/* Set styles for the button used to open and close the accordion panel */
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}
/* Add background color to the button if it is clicked (add .active class using JS), as well as when the mouse hovers over it (hover) */
.active, .accordion:hover {
  background-color: #ccc;
}
/* Add styles to the accordion panel. Note: It is hidden by default */
.panel {
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;
}

Step 3 - Add JavaScript:

var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    /* Switch between adding and removing the "active" class to highlight the control panel buttons */
    this.classList.toggle("active");
    /* Switch between hiding and showing the active panel */
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}

Try It Yourself

Animated accordion (sliding down)

To create an animated accordion, add max-height: 0,overflow: hidden and max-height property transition effect.

Then, use JavaScript to calculate and set the panel height according to different screen sizes: max-heightTo achieve the sliding effect of the content, add:

<style>
.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
</style>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  });
}
</script>

Try It Yourself

Add icon

Add a symbol to each button to indicate whether the collapsible content is open or closed:

.accordion:after {
  content: '\02795'; /* "Plus" (plus sign) Unicode character */
  font-size: 13px;
  color: #777;
  float: right;
  margin-left: 5px;
}
.active:after {
  content: "\2796"; /* "Minus" (minus sign) Unicode character */
}

Try It Yourself