How Can You Create Collapsibles in Materialize CSS?

Material Design - Interview Questions

Material Design Collapsibles are accordion elements that expand when clicked on. They allow you to hide content that is not immediately relevant to the user. Materialize CSS provides different types of CSS collapsible classes, there are accordion, popout, active, expandable and more..

Initialization jQuery Plugin :

Collapsible elements only need initialization if they are added dynamically.

$(document).ready(function(){
    $('.collapsible').collapsible();
  });

<div class="container">
    
  <ul class="collapsible" data-collapsible="accordion">
      <li>
        <div class="collapsible-header"><i class="material-icons">code</i>HTML5</div>
        <div class="collapsible-body"><span>HTML5 (No space between "HTML" and "5")is a markup language.</span></div>
      </li>
      <li>
        <div class="collapsible-header"><i class="material-icons">edit</i>CSS3</div>
        <div class="collapsible-body"><span>The first working draft of CSS3 came in 19-01-2001. </span></div>
      </li>
  </ul>

</div>