Materialize | Collapsible

Collapsibles are accordion elements that allow you to expand or collapse the content when tapped and are useful to provide a compact presentation of the content. It allow to hide the content that is not immediately relevant to the user. Here is the syntax of a simple collapsible:

<ul class=”collapsible”>
<li>
<div class=”collapsible-header”><i class=”material-icons”>filter_drama</i>First</div>
<div class=”collapsible-body”><span>GeeksforGeeks</span></div>
</li>
<li>
<div class=”collapsible-header”><i class=”material-icons”>place</i>Second</div>
<div class=”collapsible-body”><span>GeeksforGeeks</span></div>
</li>
<li>
<div class=”collapsible-header”><i class=”material-icons”>whatshot</i>Third</div>
<div class=”collapsible-body”><span>GeeksforGeeks</span></div>
</li>
</ul>

Following are the collapsible classes provided by materialize with their purpose:

• collapsible class is used to identify an element as a collapsible component.
• collapsible-header class is used to set div tag as a section header.
• collapsible-body class is used to set div tag as a section content.
• expandable class allows multiple sections to stay open at a time. This is a default behavior.
• popout class is used to make the pop-out section.
• accordion class allows only one section to stay open at a time.
• active class allows the current section to open before selecting it.

Example:

Output: