How to create a collapsible section using CSS and JavaScript ?

Last Updated : 11 Jan, 2024

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 variable btn.
- Attach a click event listener to the button to toggle the “active” class and control the display of the content section.
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”.

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:

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">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>