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.
Follow the following steps to create a Materialize collapsibles:.
Step:1 - Add the .collapsible
class to the collapsible container i.e <ul>
element.
<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.
<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.
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>
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>
To create collapsible expandable, assign the .collapsible
followed by the .expandable
class to the collapsible container i.e <ul>
element base class.
General Syntax
<ul class="collapsible expandable" data-collapsible="expandable"></ul>
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>
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_downGeneral 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>
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>
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.
General Syntax
<ul class="collapsible popout" data-collapsible="accordion"></ul>
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>
To make preopened collapsible section, just assign the .active
class to the collapsible-header element base class.
General Syntax
<div class="collapsible-header active"></div>
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>