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>
<li>
<div class="collapsible-header"><i class="material-icons">favorite_border</i>Material Design</div>
<div class="collapsible-body"><span>Materialize is a User Interface (UI) component library. Introduced by Google (2014 – Present).</span></div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">format_bold</i>Bootstrap 4</div>
<div class="collapsible-body"><span>Bootstrap is the most popular HTML, CSS and JavaScript framework for developing responsive, mobile-first web sites.</span></div>
</li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.collapsible').collapsible();
});
</script>If you want a collapsible Preselected section, just add the active class to the collapsible-header.
<div class="collapsible-header active"><i class="material-icons">code</i>HTML5</div><div class="container">
<ul class="collapsible" data-collapsible="accordion">
<li>
<div class="collapsible-header active"><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>
<li>
<div class="collapsible-header"><i class="material-icons">favorite_border</i>Material Design</div>
<div class="collapsible-body"><span>Materialize is a User Interface (UI) component library. Introduced by Google (2014 – Present).</span></div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">format_bold</i>Bootstrap 4</div>
<div class="collapsible-body"><span>Bootstrap is the most popular HTML, CSS and JavaScript framework for developing responsive, mobile-first web sites.</span></div>
</li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.collapsible').collapsible();
});
</script>To create a collapsible popout, just add the popout class in <ul>. Ex : class="collapsible popout".
<div class="container">
<ul class="collapsible popout" 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>
<li>
<div class="collapsible-header active"><i class="material-icons">favorite_border</i>Material Design</div>
<div class="collapsible-body"><span>Materialize is a User Interface (UI) component library. Introduced by Google (2014 – Present).</span></div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">format_bold</i>Bootstrap 4</div>
<div class="collapsible-body"><span>Bootstrap is the most popular HTML, CSS and JavaScript framework for developing responsive, mobile-first web sites.</span></div>
</li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.collapsible').collapsible();
});
</script>Are you create collapsible expandables just add expandable class in <ul>.
<ul class="collapsible" data-collapsible="expandable"><div class="container">
<ul class="collapsible" data-collapsible="expandable">
<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>
<li>
<div class="collapsible-header"><i class="material-icons">favorite_border</i>Material Design</div>
<div class="collapsible-body"><span>Materialize is a User Interface (UI) component library. Introduced by Google (2014 – Present).</span></div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">format_bold</i>Bootstrap 4</div>
<div class="collapsible-body"><span>Bootstrap is the most popular HTML, CSS and JavaScript framework for developing responsive, mobile-first web sites.</span></div>
</li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.collapsible').collapsible();
});
</script>You can customize the behavior of each collapsible using these options.
$('.collapsible').collapsible({
accordion: false, // A setting that changes the collapsible behavior to expandable instead of the default accordion style
onOpen: function(el) { alert('Open'); }, // Callback for Collapsible open
onClose: function(el) { alert('Closed'); } // Callback for Collapsible close
});You can programmatically open and close collapsibles through these methods.
// Open
$('.collapsible').collapsible('open', 0);
// Close
$('.collapsible').collapsible('close', 0);
// Destroy
$('.collapsible').collapsible('destroy');