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 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 Create Section Counter using HTML and CSS ?
- 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 add section that is quoted from another source using HTML ?
- Difference between <article> tag and <section> tag
- HTML | <section> Tag
- HTML Course | Building Main Content - Section 1
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.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.