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. In this article, we will learn how to create a simple collapsible section using CSS and JavaScript.

It is done by using a button and enclosing the content of the section in a div. The event listener is added to the button to listen to mouse clicks. The “Active” class is toggled on each button click. When the section is expanded, the background color of the button changes. Also, the “display” property of the content is changed to “block” on click button event to make it visible when it is “none” (hidden) and vice versa as shown below.

Example 1:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<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>
   
<body>
    <h1>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>
        var btn = document.getElementsByClassName("collapse");
   
        btn[0].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>

chevron_right


Output:

  • Collapsed:
  • Expanded:

Example 2: The “width” of the collapse button and the content is set to 50% and the content is “center” aligned.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<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>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>
        var btn = document
            .getElementsByClassName("collapse");
  
        btn[0].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>                    

chevron_right


Output:

  • Collapsed:
  • Expanded:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.