The example of simple Materialize Collapsible/Accordion

Materialize Code		Output
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.4/css/materialize.min.css"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <script type = "text/javascript" src = "https://code.jquery.com/jquery-2.1.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.4/js/materialize.min.js"></script> </head> <body> <div class="container"> <h5>A demo of Collapsible in Materialize</h5> <ul class="collapsible"> <li> <div class="collapsible-header"><i class="material-icons">settings_ethernet</i>Materialize Framework</div> <div class="collapsible-body"><span>The content for first panel comes here!</span></div> </li> <li> <div class="collapsible-header"><i class="material-icons">settings</i>jQuery</div> <div class="collapsible-body"><span>The content for second panel comes here!</span></div> </li> <li> <div class="collapsible-header"><i class="material-icons">star_rate</i>HTML</div> <div class="collapsible-body"><span>The content for third panel comes here!</span></div> </li> </ul> </div> <script> $(document).ready(function(){ $('.collapsible').collapsible(); }); </script> </body> </html>		A demo of Collapsible in Materialize Materialize Framework The content for first panel comes here! jQuery The content for second panel comes here! HTML The content for third panel comes here!