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:
<!DOCTYPE html> < html >
< head >
<!--Import Google Icon Font-->
< link href =
rel = "stylesheet" >
<!-- Compiled and minified CSS -->
< link rel = "stylesheet" href =
< script type = "text/javascript" src =
</ script >
<!--Let browser know website is optimized for mobile-->
< meta name = "viewport" content=" width = device -width,
initial-scale = 1 .0"/>
< style >
.card-panel{
border: thin solid green;
}
</ style >
</ head >
< body class = "container" >
< h3 >Collapsible in Materialize:</ h3 >
< div class = "card-panel" >
< h4 >Simple Collapsible</ h4 >
< ul class = "collapsible" data-collapsible = "accordion" >
< li >
< div class = "collapsible-header" >
< i class = "material-icons" >
favorite</ i >
First Option
</ div >
< div class = "collapsible-body" >
< p >GeeksforGeeks</ p >
</ div >
</ li >
< li >
< div class = "collapsible-header" >
< i class = "material-icons" >history</ i >
Second Option
</ div >
< div class = "collapsible-body" >
< p >GeeksforGeeks</ p >
</ div >
</ li >
< li >
< div class = "collapsible-header" >
< i class = "material-icons" >
home</ i >Third Option
</ div >
< div class = "collapsible-body" >
< p >GeeksforGeeks</ p ></ div >
</ li >
</ ul >
</ div >
< div class = "card-panel" >
< h4 >Expandable Collapsible</ h4 >
< ul class = "collapsible" data-collapsible = "expandable" >
< li >
< div class = "collapsible-header" >
< i class = "material-icons" >favorite
</ i >First Option</ div >
< div class = "collapsible-body" >
< p >GeeksforGeeks</ p ></ div >
</ li >
< li >
< div class = "collapsible-header" >
< i class = "material-icons" >
history</ i >Second Option</ div >
< div class = "collapsible-body" >
< p >GeeksforGeeks</ p ></ div >
</ li >
< li >
< div class = "collapsible-header" >
< i class = "material-icons" >
whatshot</ i >Third Option</ div >
< div class = "collapsible-body" >
< p >GeeksforGeeks</ p ></ div >
</ li >
</ ul >
</ div >
< div class = "card-panel" >
< h4 >Pop-out Collapsible</ h4 >
< ul class = "collapsible popout"
data-collapsible = "accordion" >
< li >
< div class = "collapsible-header" >
< i class = "material-icons" >
favorite</ i >First Option</ div >
< div class = "collapsible-body" >
< p >GeeksforGeeks</ p ></ div >
</ li >
< li >
< div class = "collapsible-header" >
< i class = "material-icons" >history
</ i >Second Option</ div >
< div class = "collapsible-body" >
< p >GeeksforGeeks</ p ></ div >
</ li >
< li >
< div class = "collapsible-header" >
< i class = "material-icons" >whatshot
</ i >Third Option</ div >
< div class = "collapsible-body" >
< p >GeeksforGeeks</ p ></ div >
</ li >
</ ul >
</ div >
< div class = "card-panel" >
< h4 >Pre-selected Collapsible</ h4 >
< ul class = "collapsible" data-collapsible = "expandable" >
< li >
< div class = "collapsible-header active" >
< i class = "material-icons" >
favorite</ i >First Option</ div >
< div class = "collapsible-body" >
< p >GeeksforGeeks</ p ></ div >
</ li >
< li >
< div class = "collapsible-header" >
< i class = "material-icons" >history
</ i >Second Option</ div >
< div class = "collapsible-body" >
< p >GeeksforGeeks</ p ></ div >
</ li >
< li >
< div class = "collapsible-header" >
< i class = "material-icons" >whatshot
</ i >Third Option</ div >
< div class = "collapsible-body" >
< p >GeeksforGeeks</ p ></ div >
</ li >
</ ul >
</ div >
<!-- Compiled and minified JavaScript -->
< script src =
</ script >
</ body >
</ html >
|
Output: