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" >GeeksforGeeks</ h1 >
< button type = "button" class = "collapse" >
Open Collapsible section
</ button >
< div class = "text" >
A Computer Science portal for geeks.
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" >GeeksforGeeks</ 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: