Materialize CSS 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:
<!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:
Please Login to comment...