Basic Collapses
href attribute, or a button with the data-target attribute. In both cases, the data-toggle="collapse" is required.Default Collapses
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.
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.
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.
<div id="collapses-one">
<div class="collapses-card">
<div class="collapses-head" id="heading-one-1" data-toggle="collapse"
data-target="#collapse-one-1" role="button" aria-expanded="false" aria-controls="collapse-one-1">
<span class="collapses-head_title">...</span>
<div class="collapses-card_mode">
<i class="la la-plus mode-plus"></i>
<i class="la la-minus mode-minus"></i>
</div>
</div>
<div id="collapse-one-1" class="collapse" aria-labelledby="heading-one-1" data-parent="#collapses-one">
<div class="collapses-body">
<p>...</p>
</div>
</div>
</div>
<div class="collapses-card">
<div class="collapses-head" id="heading-one-2" data-toggle="collapse"
data-target="#collapse-one-2" role="button" aria-expanded="false" aria-controls="collapse-one-2">
<span class="collapses-head_title">...</span>
<div class="collapses-card_mode">
<i class="la la-plus mode-plus"></i>
<i class="la la-minus mode-minus"></i>
</div>
</div>
<div id="collapse-one-2" class="collapse" aria-labelledby="heading-one-2" data-parent="#collapses-one">
<div class="collapses-body">
<p>...</p>
</div>
</div>
</div>
<div class="collapses-card">
<div class="collapses-head" id="heading-one-3" data-toggle="collapse"
data-target="#collapse-one-3" role="button" aria-expanded="false" aria-controls="collapse-one-3">
<span class="collapses-head_title">...</span>
<div class="collapses-card_mode">
<i class="la la-plus mode-plus"></i>
<i class="la la-minus mode-minus"></i>
</div>
</div>
<div id="collapse-one-3" class="collapse" aria-labelledby="heading-one-3" data-parent="#collapses-one">
<div class="collapses-body">
<p>...</p>
</div>
</div>
</div>
</div>
Arrow Variant Collapses
Solid color head collapsesAnim 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.
<div id="collapses-three">
<div class="collapses-card">
<div class="collapses-head" id="heading-three-1" data-toggle="collapse"
data-target="#collapse-three-1" role="button" aria-expanded="false" aria-controls="collapse-three-1">
<span class="collapses-head_title">...</span>
<div class="collapses-card_mode">
<i class="la la-angle-down mode-rotate"></i>
</div>
</div>
<div id="collapse-three-1" class="collapse" aria-labelledby="heading-three-1" data-parent="#collapses-three">
<div class="collapses-body">
<p>...</p>
</div>
</div>
</div>
</div>
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.
<div id="collapses-four">
<div class="collapses-card collapses-card_border">
<div class="collapses-head" id="heading-four-1" data-toggle="collapse"
data-target="#collapse-four-1" role="button" aria-expanded="false" aria-controls="collapse-four-1">
<span class="collapses-head_title">...</span>
<div class="collapses-card_mode">
<i class="la la-angle-down mode-rotate"></i>
</div>
</div>
<div id="collapse-four-1" class="collapse" aria-labelledby="heading-four-1" data-parent="#collapses-four">
<div class="collapses-body">
<p>...</p>
</div>
</div>
</div>
</div>
Color Variants
Theme come with several color variants just adding.collapses-card_* on .collapses-card get color variants like: primary, brand, info etc...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.
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.
Bordered Collapses
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.
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.
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.
<div id="collapses-two">
<div class="collapses-card collapses-card_border">
<div class="collapses-head" id="heading-two-1" data-toggle="collapse"
data-target="#collapse-two-1" role="button" aria-expanded="false" aria-controls="collapse-two-1">
<span class="collapses-head_title">...</span>
<div class="collapses-card_mode">
<i class="la la-plus mode-plus"></i>
<i class="la la-minus mode-minus"></i>
</div>
</div>
<div id="collapse-two-1" class="collapse" aria-labelledby="heading-two-1" data-parent="#collapses-two">
<div class="collapses-body">
<p>...</p>
</div>
</div>
</div>
<div class="collapses-card collapses-card_border">
<div class="collapses-head" id="heading-two-2" data-toggle="collapse"
data-target="#collapse-two-2" role="button" aria-expanded="false" aria-controls="collapse-two-2">
<span class="collapses-head_title">...</span>
<div class="collapses-card_mode">
<i class="la la-plus mode-plus"></i>
<i class="la la-minus mode-minus"></i>
</div>
</div>
<div id="collapse-two-2" class="collapse" aria-labelledby="heading-two-2" data-parent="#collapses-two">
<div class="collapses-body">
<p>...</p>
</div>
</div>
</div>
<div class="collapses-card collapses-card_border">
<div class="collapses-head" id="heading-two-3" data-toggle="collapse"
data-target="#collapse-two-3" role="button" aria-expanded="false" aria-controls="collapse-two-3">
<span class="collapses-head_title">...</span>
<div class="collapses-card_mode">
<i class="la la-plus mode-plus"></i>
<i class="la la-minus mode-minus"></i>
</div>
</div>
<div id="collapse-two-3" class="collapse" aria-labelledby="heading-two-3" data-parent="#collapses-two">
<div class="collapses-body">
<p>...</p>
</div>
</div>
</div>
</div>
Icon Collapses
Solid color head collapsesAnim 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.
<div id="collapses-five">
<div class="collapses-card">
<div class="collapses-head" id="heading-five-1" data-toggle="collapse"
data-target="#collapse-five-1" role="button" aria-expanded="false" aria-controls="collapse-five-1">
<div class="collapses-card_icon">
<i class="la la-user"></i>
</div>
<span class="collapses-head_title">...</span>
<div class="collapses-card_mode">
<i class="la la-angle-down mode-rotate"></i>
</div>
</div>
<div id="collapse-five-1" class="collapse" aria-labelledby="heading-five-1" data-parent="#collapses-five">
<div class="collapses-body">
<p>...</p>
</div>
</div>
</div>
</div>
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.
<div id="collapses-six">
<div class="collapses-card collapses-card_border">
<div class="collapses-head" id="heading-six-1" data-toggle="collapse"
data-target="#collapse-six-1" role="button" aria-expanded="false" aria-controls="collapse-six-1">
<div class="collapses-card_icon">
<i class="la la-user"></i>
</div>
<span class="collapses-head_title">...</span>
<div class="collapses-card_mode">
<i class="la la-angle-down mode-rotate"></i>
</div>
</div>
<div id="collapse-six-1" class="collapse" aria-labelledby="heading-six-1" data-parent="#collapses-six">
<div class="collapses-body">
<p>...</p>
</div>
</div>
</div>
</div>