Skip to content
Related Articles

Related Articles

How to create a collapsible section using CSS and JavaScript ?
  • Last Updated : 30 Jun, 2020

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:




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

Output:

  • Collapsed:
  • Expanded:

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




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

Output:

  • Collapsed:
  • Expanded:

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :