How to create a collapsible section using CSS and JavaScript ? - GeeksforGeeks

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:
CSS-Misc
HTML-Misc
JavaScript-Misc
CSS
HTML
JavaScript
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to apply style to parent if it has child with CSS?
How to set space between the flexbox ?
Design a web page using HTML and CSS
How to Upload Image into Database and Display it using PHP ?
Create a Responsive Navbar using ReactJS
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
REST API (Introduction)
HTML Cheat Sheet - A Basic Guide to HTML
How to Insert Form Data into Database using PHP ?