• Accordion
• Breadcrumb
• Buttons
• Content card
• File Download
• Form elements
• Hub header
• Inset text
• Links
• Loader
• Page header
• Phase indicator
• Warning text

Accordion

About

What does it do?

• Allows users to reveal or hide related content on a page

When to use it?

• When users need only a few key pieces of content on a single page.
• When you want users to have control over the content by expanding it or hiding it (progressive disclosure).
• When you have long, content rich pages and you need to simplify and reduce the amount of content or keep the content on the single page separated by headings.
• When you want users to use headings to navigate quickly to specific sections of the page (Information architecture).

When not to use it?

• When you are presenting essential information and users care about many topics on the page. If users need to open majority of subtopics to have their questions answered, it will require extra effort and click. Hiding content behind navigation diminishes user's awareness of it.

Closed

In its closed state, the accordions .wmre-accordion__content is hidden from view.

Everything you can see whilst the accordion is in this state is nested within the button.wmre-accordion-summary-wrapper element.

Take note that:

• The attribute aria-controls is equal to the id set on the .wmre-accordion__content element. This helps with accessibility, so that screen readers understand that x button controls x content.
• The attribute aria-expanded is set to "false" when in the closed state. Again, this helps with accessibility.
• The only thing not visible in the button.wmre-accordion-summary-wrapper is the minimise icon.

<div class="wmre-accordion">
  <div aria-controls="accordion-01" class="wmre-accordion__summary-wrapper" aria-expanded="false">
    <!-- accordion summary -->
    <div class="wmre-accordion__summary">
      <h4 class="wmre-m-b-none">Accordion</h4>
    </div>
    <!-- plus icon -->
    <svg class="wmre-accordion__icon">
      <use xlink:href="#wmre-general-expand" href="#wmre-general-expand"></use>
    </svg>
    <!-- minus icon -->
    <svg class="wmre-accordion__icon wmre-accordion__icon--minimise">
      <use xlink:href="#wmre-general-minimise" href="#wmre-general-minimise"></use>
    </svg>
  </div>

  <!-- accordion content -->
  <div class="wmre-accordion__content" id="accordion-01">
    <p>
      <strong>Some random subtitle</strong>
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt consectetur, eius repellat dolor vel corporis eos fugiat. Ut totam, incidunt sequi iusto nesciunt illum natus, dolores velit cumque, excepturi labore!
    </p>
  </div>
</div>

Open

In the open state, the accordion shows all of the content it was initially hiding in the .wmre-accordion__content element.

To change the accordion to this state, you need to add the modifier class wmre-is--open to the main .wmre-accordion element as shown in the code snippet.

Take note that:

• The attribute aria-expanded is set to "true" when in the open state. Again, this helps with accessibility.
• The minus icon becomes visible in this state, whilst the plus icon is hidden.

<div class="wmre-accordion wmre-is--open">
  <div aria-controls="accordion-open-01" class="wmre-accordion__summary-wrapper" aria-expanded="true">
    <!-- accordion summary -->
    <div class="wmre-accordion__summary">
      <h4 class="wmre-m-b-none">Accordion</h4>
    </div>
    <!-- plus icon -->
    <svg class="wmre-accordion__icon">
      <use xlink:href="#wmre-general-expand" href="#wmre-general-expand"></use>
    </svg>
    <!-- minus icon -->
    <svg class="wmre-accordion__icon wmre-accordion__icon--minimise">
      <use xlink:href="#wmre-general-minimise" href="#wmre-general-minimise"></use>
    </svg>
  </div>

  <!-- accordion content -->
  <div class="wmre-accordion__content" id="accordion-open-01">
    <p>
      <strong>Some random subtitle</strong>
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt consectetur, eius repellat dolor vel corporis eos fugiat. Ut totam, incidunt sequi iusto nesciunt illum natus, dolores velit cumque, excepturi labore!
    </p>
  </div>
</div>