Collapsible sections are sections of content that can shrink and expand by clicking on them. They are a popular way to organize content in such a manner that the user will be able to see the content of a section only if he wishes. In this article, we will learn how to create a simple collapsible section using CSS and JavaScript.
Approach: It is done by using a button and enclosing the content of the section in a div. The event listener is added to the button to listen to mouse clicks. The “Active” class is toggled on each button click. When the section is expanded, the background color of the button changes. Also, the “display” property of the content is changed to “block” on the click button event to make it visible when it is “none” (hidden) and vice versa as shown below.
Example 1: This example shows the use of the above-explained approach.
html
<head> <style> .collapse { background-color: #a2de96; border: none; outline: none; font-size: 25px; } .active, .collapse:hover { background-color: #438a5e; } .text { background-color: #e1ffc2; display: none; font-size: 20px; } </style> <head> <body> <h1 style="color:green">neveropen</h1> <button type="button" class="collapse"> Open Collapsible section </button> <div class="text"> A Computer Science portal for neveropen. It contains well written, well thought and well explained computer science and programming articles, quizzes and ... </div> <script> var btn = document.getElementsByClassName("collapse"); btn[0].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"; } }); </script> </body> |
Output:
create a collapsible section using CSS and JavaScript
Example 2: The “width” of the collapse button and the content is set to 50% and the content is “center” aligned.
html
<head> <style> .collapse { background-color: #a2de96; border: none; outline: none; font-size: 25px; } .active, .collapse:hover { background-color: #438a5e; } .text { background-color: #e1ffc2; display: none; font-size: 20px; } </style> </head> <body> <h1 style="color:green">neveropen</h1> <button type="button" class="collapse"> Open Collapsible section </button> <div class="text"> How to create a collapsible section using CSS and JavaScript? </div> <script> var btn = document .getElementsByClassName("collapse"); btn[0].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"; } }); </script> </body> |
Output:
create a collapsible section using CSS and JavaScript
