Skip to content
Related Articles

Related Articles

Materialize | Collapsible
  • Last Updated : 28 Jul, 2020

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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :