How to create: Folding effect

Learn how to create collapsible sections.

Collapsible effect

Click the button to toggle between showing and hiding the collapsible content.

Some collapsible content. Click the button to toggle between showing and hiding the collapsible 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.

Try It Yourself

Create a collapsible section effect

Step 1 - Add HTML:

<button type="button" class="collapsible">Open Collapsible</button>
<div class="content">
  <p>Lorem ipsum...</p>
</div>

Step 2 - Add CSS:

Set accordion style:

/* Set the style for the button used to open and close the collapsible content */
.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}
/* Add background color to the button when clicked, and when the mouse is over the button (hover) */
.active, .collapsible:hover {
  background-color: #ccc;
}
/* Set the style for collapsible content. Note: It is hidden by default */
.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}

Step 3 - Add JavaScript:

var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}

Try It Yourself

Animated collapse effect (scroll down)

To create an animated collapse effect, please add max-height: 0,overflow: hide and max-height property transition to the panel class.

Then, use JavaScript to add the calculated max-height To scroll down the content, it depends on the height of the panel on different screen sizes:

Example

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

Try It Yourself

Add icon

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

Example

.collapsible:after {
  content: '\02795'; /* Represents the Unicode character for 'plus' (+) */
  font-size: 13px;
  color: white;
  float: right;
  margin-left: 5px;
}
.active:after {
  content: "\2796"; /* Represents the Unicode character for 'minus' (-) */
}

Try It Yourself