Materialize CSS Demo
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> <!-- Compiled and minified JavaScript --> <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 popout"> <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 class="active"> <div class="collapsible-header"><i class="material-icons">settings</i>jQuery (pre-selected)</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
settings_ethernet
Materialize Framework
The content for first panel comes here!
settings
jQuery (pre-selected)
The content for second panel comes here!
star_rate
HTML
The content for third panel comes here!