The accordion component delivers large amounts of content in a small space through progressive disclosure. That is, the user gets key details about the underlying content and can choose to expand that content within the constraints of the accordion.
Accordions are composed of a list of longer blocks of text, with a header button to toggle the visibility of each block.
An accordion is implemented as an unordered list with a class of c-accordion. Each list has a class of c-accordion__item. Inside, there is a header button with the class c-accordion__header and the content div with the class c-accordion__content.
Content visibility is toggled via the header button. To make accordion content visible, the section is given the class is-open, changing the display of the content div to block.
<ul class="c-accordion">
<li class="c-accordion__item">
<button class="c-accordion__header is-open">
<span class="c-accordion__header-title">Item 1</span>
</button>
<div class="c-accordion__content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum a ab quae quas optio ut officia quia? Modi at impedit dolorem est voluptatem facilis, beatae atque tenetur, soluta dolorum inventore sapiente laborum. Alias esse soluta porro distinctio aperiam, qui suscipit.
</div>
</li>
<li class="c-accordion__item">
<button class="c-accordion__header">
<span class="c-accordion__header-title">Item 2</span>
</button>
<div class="c-accordion__content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum a ab quae quas optio ut officia quia? Modi at impedit dolorem est voluptatem facilis, beatae atque tenetur, soluta dolorum inventore sapiente laborum. Alias esse soluta porro distinctio aperiam, qui suscipit.
</div>
</li>
<li class="c-accordion__item">
<button class="c-accordion__header">
<span class="c-accordion__header-title">Item 3</span>
</button>
<div class="c-accordion__content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum a ab quae quas optio ut officia quia? Modi at impedit dolorem est voluptatem facilis, beatae atque tenetur, soluta dolorum inventore sapiente laborum. Alias esse soluta porro distinctio aperiam, qui suscipit.
</div>
</li>
</ul>
When only one piece of content is required to have a collapsable behavior we have the Collapse Container component. Conformed by a container class of c-collapse-container, a heading with the c-collapse-container__heading class, followed by the content with the class c-collapse-container__content.
<!-- Collapse container starts -->
<section class="c-collapse-container">
<h3 class="c-collapse-container__heading">Update your selected filters</h3>
<div class="c-collapse-container__content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat</p>
</div>
</section>
<!-- Collapse container ends -->