Collapsibles are accordion elements that expand when clicked on. They allow you to hide content that is not immediately relevant to the user.
To create a popout collapsible, just add the class popout
.
<ul class="collapsible popout" data-collapsible="accordion">
<ul class="collapsible" data-collapsible="accordion">
<li>
<div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">place</i>Second</div>
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
</li>
</ul>
$(document).ready(function(){
$('.collapsible').collapsible();
});
active
class to the collapsible-header.
<div class="collapsible-header active"><i class="material-icons">place</i>Second</div>
$('.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
});
// Open
$('.collapsible').collapsible('open', 0);
// Close
$('.collapsible').collapsible('close', 0);
// Destroy
$('.collapsible').collapsible('destroy');
data-collapsible
attribute in HTML.
<ul class="collapsible" data-collapsible="accordion">
<ul class="collapsible" data-collapsible="expandable">