Accordion

An accordion is a useful component for displaying large groups of related content while having the ability to save space on a site. Appropriate use cases are FAQ's, or for a list of features or options on a particular subject.

Please note that what the design system is providing, is the html markup and css styling. Function will need to be provided in your language of choice. When adding the functionality to an accordion, you must also be aware of accessibility — for example, making sure that aria-expanded = 'true' has been added to .accordion-header.

The design system also provides the class name of .is-open to .accordion-content and .accordion-header-text which can be activated to hide or show the accordion content as well as change the appearance of the toggle icon

<div role='region' class='accordion'>
  <div class='accordion-item border-light-2'>
    <div class='accordion-header-text padding-top-3 padding-bottom-3 padding-left-4 padding-right-4'>
      <h3 class='margin-bottom-0 heading-size-h3-small'>
        <button class='accordion-header full-width border-0 margin-0 background-color-white' aria-expanded='true'>
          Lorem ipsum dolor sit amet
          <div class='accordion-toggle icon-right'>
            <i class='icon-plus'></i>
          </div>
        </button>
      </h3>
    </div>
    <div class='accordion-content' id="accordionContents">
       <p>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 nulla pariatur.</p>
       <button class="button button-tertiary">Test Button</button>
    </div>
  </div>
  <div class='accordion-item border-light-2'>
    <div class='accordion-header-text padding-top-3 padding-bottom-3 padding-left-4 padding-right-4'>
      <h3 class='margin-bottom-0 heading-size-h3-small'>
        <button class='accordion-header full-width border-0 margin-0' aria-expanded='true'>
          Excepteur sint occaecat cupidatat non proident
          <div class='accordion-toggle icon-right'>
            <i class='icon-plus'></i>
          </div>
        </button>
      </h3>
    </div>
    <div class='accordion-content' id="accordionContents">
      <p>Consequat interdum varius sit amet. Turpis egestas pretium aenean pharetra magna ac placerat vestibulum lectus. At varius vel pharetra vel turpis nunc eget lorem.</p>
    </div>
  </div>
</div>

Example of the code providing functionality, written in javascript:

// Select the accordion block to ensure function only affects one at a time in case of multiple accordions on the page
document.querySelectorAll('.accordion').forEach(accordion => {
  const toggles = accordion.querySelectorAll('.accordion-header');
  
  // Toggles each item individually
  toggles.forEach(toggle => {
    toggle.addEventListener('click', function() {
      const itemHeader = toggle.parentElement.parentElement
      const itemContent = toggle.parentElement.parentElement.nextElementSibling;
      const icon = toggle.querySelector('.accordion-toggle i');

      if (itemContent.classList.contains('is-open')) {
        // If the clicked item is open, close it
        itemContent.classList.remove('is-open');
        itemHeader.classList.remove('is-open');
        icon.classList.remove('icon-minus');
        icon.classList.add('icon-plus');
      } else {
        // Open the clicked item
        itemContent.classList.add('is-open');
        itemHeader.classList.add('is-open');
        icon.classList.remove('icon-plus');
        icon.classList.add('icon-minus');
      }

    });
  });
});