Collapse
Collapse
Huro provides a simple to use collapse component. There are 2
available variations that you can use to change the collapse
header icon. Add the has-plus
class to the
collapse-icon
element to use a plus icon. Add the
has-chevron
class to the
collapse-icon
element to use a chevron icon.
Check markup for more details.
<div class="collapse has-plus">
<div class="collapse-header">
<h3>Plus Item 1</h3>
<div class="collapse-icon">
<i data-feather="plus"></i>
</div>
</div>
<div class="collapse-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. At multis malis affectus. Sed quid sentiat, non videtis. Sumenda potius quam expetenda. Quacumque enim ingredimur, in aliqua historia vestigium ponimus. Duarum enim vitarum nobis erunt instituta capienda. Cupiditates non Epicuri divisione finiebat, sed sua satietate.</p>
<p>Duo Reges: constructio interrete. Quid est igitur, inquit, quod requiras? Quid ergo attinet gloriose loqui, nisi constanter loquare? Collige omnia, quae soletis: Praesidium amicorum. Non igitur bene.</p>
</div>
</div>
<div class="collapse has-chevron">
<div class="collapse-header">
<h3>Chevron Item 2</h3>
<div class="collapse-icon">
<i data-feather="chevron-down"></i>
</div>
</div>
<div class="collapse-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. At multis malis affectus. Sed quid sentiat, non videtis. Sumenda potius quam expetenda. Quacumque enim ingredimur, in aliqua historia vestigium ponimus. Duarum enim vitarum nobis erunt instituta capienda. Cupiditates non Epicuri divisione finiebat, sed sua satietate.</p>
<p>Duo Reges: constructio interrete. Quid est igitur, inquit, quod requiras? Quid ergo attinet gloriose loqui, nisi constanter loquare? Collige omnia, quae soletis: Praesidium amicorum. Non igitur bene.</p>
</div>
</div>
Plus Item 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. At multis malis affectus. Sed quid sentiat, non videtis. Sumenda potius quam expetenda. Quacumque enim ingredimur, in aliqua historia vestigium ponimus. Duarum enim vitarum nobis erunt instituta capienda. Cupiditates non Epicuri divisione finiebat, sed sua satietate.
Duo Reges: constructio interrete. Quid est igitur, inquit, quod requiras? Quid ergo attinet gloriose loqui, nisi constanter loquare? Collige omnia, quae soletis: Praesidium amicorum. Non igitur bene.
Plus Item 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. At multis malis affectus. Sed quid sentiat, non videtis. Sumenda potius quam expetenda. Quacumque enim ingredimur, in aliqua historia vestigium ponimus. Duarum enim vitarum nobis erunt instituta capienda. Cupiditates non Epicuri divisione finiebat, sed sua satietate.
Duo Reges: constructio interrete. Quid est igitur, inquit, quod requiras? Quid ergo attinet gloriose loqui, nisi constanter loquare? Collige omnia, quae soletis: Praesidium amicorum. Non igitur bene.
Plus Item 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. At multis malis affectus. Sed quid sentiat, non videtis. Sumenda potius quam expetenda. Quacumque enim ingredimur, in aliqua historia vestigium ponimus. Duarum enim vitarum nobis erunt instituta capienda. Cupiditates non Epicuri divisione finiebat, sed sua satietate.
Duo Reges: constructio interrete. Quid est igitur, inquit, quod requiras? Quid ergo attinet gloriose loqui, nisi constanter loquare? Collige omnia, quae soletis: Praesidium amicorum. Non igitur bene.
Chevron Item 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. At multis malis affectus. Sed quid sentiat, non videtis. Sumenda potius quam expetenda. Quacumque enim ingredimur, in aliqua historia vestigium ponimus. Duarum enim vitarum nobis erunt instituta capienda. Cupiditates non Epicuri divisione finiebat, sed sua satietate.
Duo Reges: constructio interrete. Quid est igitur, inquit, quod requiras? Quid ergo attinet gloriose loqui, nisi constanter loquare? Collige omnia, quae soletis: Praesidium amicorum. Non igitur bene.
Chevron Item 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. At multis malis affectus. Sed quid sentiat, non videtis. Sumenda potius quam expetenda. Quacumque enim ingredimur, in aliqua historia vestigium ponimus. Duarum enim vitarum nobis erunt instituta capienda. Cupiditates non Epicuri divisione finiebat, sed sua satietate.
Duo Reges: constructio interrete. Quid est igitur, inquit, quod requiras? Quid ergo attinet gloriose loqui, nisi constanter loquare? Collige omnia, quae soletis: Praesidium amicorum. Non igitur bene.
Chevron Item 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. At multis malis affectus. Sed quid sentiat, non videtis. Sumenda potius quam expetenda. Quacumque enim ingredimur, in aliqua historia vestigium ponimus. Duarum enim vitarum nobis erunt instituta capienda. Cupiditates non Epicuri divisione finiebat, sed sua satietate.
Duo Reges: constructio interrete. Quid est igitur, inquit, quod requiras? Quid ergo attinet gloriose loqui, nisi constanter loquare? Collige omnia, quae soletis: Praesidium amicorum. Non igitur bene.