Content elements

Accordion

The accordion component lets users show and hide sections of related content on a page.

<div class="occlss-accordion js-occlss-accordion">
  <h3 class="occlss-accordion__panel-title"> Article 1 </h3>
  <div class="occlss-accordion__panel-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sodales convallis ex, a tincidunt mauris ornare non. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ullamcorper, augue ut pharetra ultricies, ipsum sem dapibus dui, in eleifend neque augue vitae leo. Suspendisse potenti. Nulla porta leo ac facilisis iaculis. Aliquam et nibh iaculis, ultricies tellus et, rutrum neque. Donec eget aliquam tortor. Cras quis nunc congue, vehicula turpis ac, auctor leo. Fusce aliquet turpis aliquet, bibendum tortor et, faucibus massa. Cras accumsan tristique neque ut pellentesque. Duis eget efficitur leo.</p>
  </div>
  <h3 class="occlss-accordion__panel-title"> Article 2 </h3>
  <div class="occlss-accordion__panel-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sodales convallis ex, a tincidunt mauris ornare non. Suspendisse potenti. Nulla porta leo ac facilisis iaculis. Aliquam et nibh iaculis, ultricies tellus et, rutrum neque. Donec eget aliquam tortor. Cras quis nunc congue, vehicula turpis ac, auctor leo. Fusce aliquet turpis aliquet, bibendum tortor et, faucibus massa. Cras accumsan tristique neque ut pellentesque. Duis eget efficitur leo.</p>
  </div>
</div>

When to use this component

Accordions can be used to show and hide information that might be part of larger or more complex areas of content. Accordions have an H3 title so must be preceded by an H2 title.

When not to use

Accordions hide content from users, and not everyone will notice or understand them. Don’t use them for content that is essential to all users. Accordions work best when they contain simple content and links, never put a table in an accordion.

Before using an accordion:

  • consider reducing or simplifying the content
  • splitting the content up across several pages
  • separating the content with headings on a single page use an index page or jump-links page that allows users to navigate to the content they want quickly.

Avoid using accordions for frequently asked questions, use a jump-links page instead.

Changelog

2.2.0

  • Accordions markup changes and hover state added

1.0.0

  • Component added