How to create: Folding effect
- Previous Page Pop-up Window
- Next Page Calendar
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.
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"; } }); }
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>
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' (-) */ }
- Previous Page Pop-up Window
- Next Page Calendar