Open In App
Related Articles

How to create a collapsible section using CSS and JavaScript ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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

  1. 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.
  2. HTML Structure:
    • Create an HTML structure with a heading, a collapsible button, and a content section. Set initial styles and states for elements.
  3. 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.
  4. 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

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>

                    

Output:

create a collapsible section using CSS and JavaScript

create a collapsible section using CSS and JavaScript



Last Updated : 11 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads