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 2: The “width” of the collapse button and the content is set to 50% and the content is “center” aligned.
- How to Create Section Counter using HTML and CSS ?
- How to automatically close all collapsible elements inside of the accordion when closing the accordion?
- Materialize | Collapsible
- How to insert collapsible Text Boxes in New Google Sites ?
- How to add footer for a document or section using HTML5 ?
- How to redirect to a particular section of a page using HTML or jQuery?
- How to create a drag and drop feature for reordering the images using HTML CSS and jQueryUI ?
- How to create X and Y axis flip animation using HTML and CSS ?
- Difference between <article> tag and <section> tag
- How to create Glowing Star effect using HTML and CSS?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. 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.