How to create a collapsible section using CSS and JavaScript ?
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. We will learn how to create a simple collapsible section using CSS and JavaScript.
Approach
- CSS Styling:
- Define styles using CSS for the collapsible button, the active state, and the content section. Customize background colors, font sizes, and other visual aspects.
- HTML Structure:
- Create an HTML structure with a heading, a collapsible button, and a content section. Set initial styles and states for elements.
- JavaScript Interaction:
- Use JavaScript to select the button element using
getElementsByClassName
and store it in the variablebtn
. - Attach a click event listener to the button to toggle the “active” class and control the display of the content section.
- Use JavaScript to select the button element using
- Button Toggle Logic:
- Inside the event listener, use
classList.toggle
to add or remove the “active” class on the button, changing its appearance. - Retrieve the content section using
this.nextElementSibling
and toggle its display between “block” and “none”.
- Inside the event listener, use
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" >w3wiki</ h1 > < button type = "button" class = "collapse" > Open Collapsible section </ button > < div class = "text" > A Computer Science portal for Beginner. It contains well written, well thought and well explained computer science and programming articles, quizzes and ... </ div > < script > let btn = document.getElementsByClassName("collapse"); btn[0].addEventListener("click", function () { this.classList.toggle("active"); let content = this.nextElementSibling; if (content.style.display === "block") { content.style.display = "none"; } else { content.style.display = "block"; } }); </ script > </ body > |
Output:
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" >w3wiki</ 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 > let btn = document .getElementsByClassName("collapse"); btn[0].addEventListener("click", function () { this.classList.toggle("active"); let content = this.nextElementSibling; if (content.style.display === "block") { content.style.display = "none"; } else { content.style.display = "block"; } }); </ script > </ body > |
Output:
Contact Us