Accordion
Huro provides an accordion component with enough styling to be
able to use it as is, out of the box. You have the choice
between a regular accordion, which means that each item can be
openened separately, and an exclusive accordion, meaning that
only one item can be expanded at a time. To make an accordion
exclusive, just add the is-exclusive class to the
target accordion element. Check the markup for
more details.
<div class="single-accordion">
<div class="accordion-header">Accordion Item 1</div>
<div class="accordion-content">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</div>
<div class="accordion-header">Accordion Item 2</div>
<div class="accordion-content">Et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</div>
<div class="accordion-header">Accordion Item 3</div>
<div class="accordion-content">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur.</div>
</div>
<div class="single-accordion is-exclusive">
<div class="accordion-header">Exclusive Item 1</div>
<div class="accordion-content">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</div>
<div class="accordion-header">Exclusive Item 2</div>
<div class="accordion-content">Et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</div>
<div class="accordion-header">Exclusive Item 3</div>
<div class="accordion-content">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur.</div>
</div>