Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create a collapsible section with CSS and JavaScript?
A collapsible section allows you to show and hide content dynamically by clicking on a trigger element. This is commonly used for FAQs, accordions, and content organization. We'll use CSS for styling and JavaScript for the toggle functionality.
HTML Structure
The basic structure consists of a button (trigger) and a content div that will be shown/hidden −
<button class="collapse">Click to Toggle</button>
<div class="content">
<p>Hidden content goes here</p>
</div>
CSS Styling
The CSS defines the appearance and initial state. The content is hidden by default using display: none −
.collapse {
background-color: #3498db;
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 18px;
}
.active, .collapse:hover {
background-color: #2980b9;
}
.content {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #ecf0f1;
}
Example
Here's a complete working example of a collapsible section −
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
margin: 20px;
}
.collapse {
background-color: #3498db;
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 18px;
}
.active, .collapse:hover {
background-color: #2980b9;
}
.content {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #ecf0f1;
font-size: 16px;
}
</style>
</head>
<body>
<h2>Collapsible Section Demo</h2>
<button type="button" class="collapse">Click to Toggle Content</button>
<div class="content">
<p>This is the hidden content that appears when you click the button above. You can put any HTML content here including text, images, or other elements.</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div>
<script>
var collapse = document.querySelector(".collapse");
collapse.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>
</html>
A blue button labeled "Click to Toggle Content" appears. When clicked, it reveals a light gray content area with text and a bulleted list. Clicking again hides the content. The button color changes to a darker blue when hovered or active.
JavaScript Functionality
The JavaScript code handles the toggle behavior −
- Event Listener: Listens for click events on the collapse button
- Toggle Class: Adds/removes the "active" class for styling
- Display Toggle: Shows/hides content by changing the display property
Conclusion
Creating a collapsible section combines CSS for styling and JavaScript for interactivity. This technique is perfect for organizing content and improving user experience by allowing users to control what information they want to see.
1K+ Views
