Collapsibles are accordion elements that expand when clicked on. They allow you to hide content that is not immediately relevant to the user.
Basic collapsible.
ul.eq-ui-collapsible(data-collapsible='accordion')
li
.eq-ui-collapsible-header.active
a
i.mdi.mdi-image-filter-drama.icon.icon-left.icon-24
| Collapsible #1
.eq-ui-collapsible-body
.eq-ui-collapsible-body-inner
| Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee.
li
.eq-ui-collapsible-header
a
i.mdi.mdi-map-marker.icon.icon-left.icon-24
| Collapsible #2
.eq-ui-collapsible-body
.eq-ui-collapsible-body-inner
| Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee.
li
.eq-ui-collapsible-header
a
i.mdi.mdi-fire.icon.icon-left.icon-24
| Collapsible #3
.eq-ui-collapsible-body
.eq-ui-collapsible-body-inner
| Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee.
<ul class="eq-ui-collapsible" data-collapsible="accordion">
<li>
<div class="eq-ui-collapsible-header active">
<a><i class="mdi mdi-image-filter-drama icon icon-left icon-24"></i>Collapsible #1</a>
</div>
<div class="eq-ui-collapsible-body">
<div class="eq-ui-collapsible-body-inner">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee.
</div>
</div>
</li>
<li>
<div class="eq-ui-collapsible-header">
<a><i class="mdi mdi-map-marker icon icon-left icon-24"></i>Collapsible #2</a>
</div>
<div class="eq-ui-collapsible-body">
<div class="eq-ui-collapsible-body-inner">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee.
</div>
</div>
</li>
<li>
<div class="eq-ui-collapsible-header">
<a><i class="mdi mdi-fire icon icon-left icon-24"></i>Collapsible #3</a>
</div>
<div class="eq-ui-collapsible-body">
<div class="eq-ui-collapsible-body-inner">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee.
</div>
</div>
</li>
</ul>For create collapsible popout add the class popout.
ul.eq-ui-collapsible.popout(data-collapsible='accordion')
<ul class="eq-ui-collapsible popout" data-collapsible="accordion">
For create collapsible expandable add in the data-collapsible expandable.
ul.eq-ui-collapsible(data-collapsible='expandable')
<ul class="eq-ui-collapsible" data-collapsible="expandable">