Materialize CSS Collapsible

Materialize CSS collapsible is accordion elements that expand when the user clicked on them. It hides content that is not immediately relevant to the user.

Example

Follow the following steps to create a Materialize collapsibles:.

Step:1 - Add the .collapsible class to the collapsible container i.e <ul> element.

Collapsible Container
   	
    <ul class="collapsible"></ul>
   

Step:2 - Place the collapsible header & collapsible body inside the collapsible containter i.e <ul class="collapsible">. Add .collapsible-header class to the collapsible header and .collapsible-body class to the collapsible body container.

Collapsible Header & Body
   	    
<ul class="collapsible"> 
  <li>
    <div class="collapsible-header"></div>
    <div class="collapsible-body"></div>
  </li>
 </ul>
   

Step:3 - Now, initialize the collapsible using Javascript or Jquery.

Collapsible Initialization
   	    
document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.collapsible');
    var instances = M.Collapsible.init(elems, options);
  });
  // Or with jQuery
  $(document).ready(function(){
    $('.collapsible').collapsible();
  });
   

General Syntax

    <ul class="collapsible" data-collapsible="accordion">
  <li>
    <div class="collapsible-header"></div>
    <div class="collapsible-body"></div>
  </li>
</ul>
     
Try It Now

Source Code

     
      <div class="row">
  <div class="col s12">
    <ul class="collapsible" id="nav-mobile">
      <li>
        <div class="collapsible-header"><i class="material-icons">place</i>Travelling To Temple</div>
        <div class="collapsible-body"><span>You have to go temple for spritual knowledge.</span></div>
      </li>
      <li>
        <div class="collapsible-header"><i class="material-icons">place</i>Hill Station</div>
        <div class="collapsible-body"><span>Learn from the nature</span></div>
      </li>
      <li>
        <div class="collapsible-header"><i class="material-icons">place</i>Long Journey</div>
        <div class="collapsible-body"><span>You will definitely learn from other.</span></div>
      </li>
    </ul>
  </div>
</div>     
    
Try it yourself

Expandable

To create collapsible expandable, assign the .collapsible followed by the .expandable class to the collapsible container i.e <ul> element base class.

Example

General Syntax

    <ul class="collapsible expandable" data-collapsible="expandable"></ul>
     
Try It Now

Source Code

     
      <ul class="collapsible expandable" id="nav-mobile">
  <li>
    <div class="collapsible-header"><i class="material-icons">filter_drama</i>Rainy Day</div>
    <div class="collapsible-body"><span>Enjoy rainy day.</span></div>
  </li>
  <li>
    <div class="collapsible-header"><i class="material-icons">place</i>Travelling</div>
    <div class="collapsible-body"><span>Learn form others during travelling.</span></div>
  </li>
  <li>
    <div class="collapsible-header"><i class="material-icons">whatshot</i>Eco-friendly</div>
    <div class="collapsible-body"><span>Adjust your self according to environment.</span></div>
  </li>
</ul>     
    
Try it yourself

Dropdown With Icons And Badges

Materialize CSS dropdown can be used with font library as well as badge component. Let us understand it with the help of an example.

Click To see Dropdown Menu arrow_drop_down

General Syntax

    <a class="dropdown-trigger btn" href="#" data-target="dropdown-menu">
  Click To see Dropdown Menu
  <i class="material-icons right">arrow_drop_down</i>
</a>
<!-- Dropdown Structure -->
<ul id="dropdown-menu" class="dropdown-content"></ul>
     
Try It Now

Source Code

     
      <a class="dropdown-trigger btn" href="#" data-target="dropdown-menu" id="nav-mobile">
  Click To see Dropdown Menu
  <i class="material-icons right">arrow_drop_down</i>
</a>
<!-- Dropdown Structure -->
<ul id="dropdown-menu" class="dropdown-content">
  <li>
    <a href="#!" class="blue-text"><i class="material-icons">cloud_upload</i>HTML5</a>
  </li>
  <li>
    <a href="#!" class="blue-text"><i class="material-icons">cloud_download</i>CSS3</a>
  </li>
</ul>     
    
Try it yourself

Collapsible Popout

To create a collapsible popout, just add the .collapsible class followed by the .popout class to the collapsible container i.e <ul> element base class.

Example

General Syntax

    <ul class="collapsible popout" data-collapsible="accordion"></ul>
     
Try It Now

Source Code

     
      <ul class="collapsible popout" data-collapsible="accordion" id="nav-mobile">
  <li>
    <div class="collapsible-header"><i class="material-icons">code</i>HTML5</div>
    <div class="collapsible-body"><span>Learn HTML5 step by step.</span></div>
  </li>
  <li>
    <div class="collapsible-header"><i class="material-icons">edit</i>CSS3</div>
    <div class="collapsible-body"><span>Learn CSS in easy steps. </span></div>
  </li>
  <li>
    <div class="collapsible-header active"><i class="material-icons">favorite_border</i>Material Design</div>
    <div class="collapsible-body"><span>Shape Your Path, provides Materialize CSS tutorial step by step</span></div>
  </li>
</ul>     
    
Try it yourself

Pre-selected Section

To make preopened collapsible section, just assign the .active class to the collapsible-header element base class.

Example

General Syntax

    <div class="collapsible-header active"></div>
     
Try It Now

Source Code

     
      <ul class="collapsible popout" data-collapsible="accordion" id="nav-mobile">
  <li>
    <div class="collapsible-header active"><i class="material-icons">code</i>HTML5</div>
    <div class="collapsible-body"><span>Learn HTML5 step by step.</span></div>
  </li>
  <li>
    <div class="collapsible-header"><i class="material-icons">edit</i>CSS3</div>
    <div class="collapsible-body"><span>Learn CSS in easy steps. </span></div>
  </li>
  <li>
    <div class="collapsible-header active"><i class="material-icons">favorite_border</i>Material Design</div>
    <div class="collapsible-body"><span>Shape your path, provides materialize css tutorial step by step</span></div>
  </li>
</ul>     
    
Try it yourself

Web Tutorials

Materialize CSS Collapsible
Html Tutorial HTML
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4
Materialize CSS Tutorial MATERIALIZE CSS