Notice: the Design Language has been migrated - You will find the new URL to call the assets from the current Design Language. See more details regarding this Migration

Accordion

The accordion is a graphical control element comprising a vertically stacked list of items. Each item can be expanded or stretched to reveal the content associated with that item. A collapsed accordion contains summary information. Upon clicking or pressing the collapsed accordion, it expands to show the full expansion panel and its contents. Accordions may appear as single items, or several stacked. Multiple accordions can be open at the same time.

Usage

Accordions can be created using the data-toggle-group attribute. Each toggle within the group must have a data-toggle attribute which will target an element with the corresponding ID. If no target is set, the target will default to the next element sibling in the DOM. Toggle group will accept the values data-toggle-group="mobile" and data-toggle-group="desktop". This will restrict the initialisation of the component to the specified screen size. To have a tab open on page load ad the attribute data-js-open="true" to the button above the content you need displaying.

Accordion content

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Accordion content

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Accordion list

List item
List item
List item
List item

<dl data-toggle-group="" data-toggle-effect="rc-expand--vertical" class="">
  <div class="rc-list__accordion-item">
    <dt>
      <button class="rc-list__header" id="heading-720" data-toggle="content-720" data-js-open="true">Accordion</button>
    </dt>
    <dd class="rc-list__content" id="content-720" aria-labelledby="heading-720">
      <span class="rc-large-intro">Accordion content</span>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. </p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. </p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. </p>
    </dd>
  </div>
  <div class="rc-list__accordion-item">
    <dt>
      <button class="rc-list__header" id="heading-114" data-toggle="content-114">Accordion</button>
    </dt>
    <dd class="rc-list__content" id="content-114" aria-labelledby="heading-114">
      <span class="rc-large-intro">Accordion content</span>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. </p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. </p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. </p>
    </dd>
  </div>
  <div class="rc-list__accordion-item">
    <dt>
      <button class="rc-list__header" id="heading-123" data-toggle="content-123">Accordion with list</button>
    </dt>
    <dd class="rc-list__content" id="content-123" aria-labelledby="heading-123">
      <span class="rc-large-intro">Accordion list</span>
      <ul class="rc-list rc-list--blank rc-list--align">
        <li class="rc-list__item">
          <a href="#/" class="rc-list__link">List item</a>
        </li>
        <li class="rc-list__item">
          <a href="#/" class="rc-list__link">List item</a>
        </li>
        <li class="rc-list__item">
          <a href="#/" class="rc-list__link">List item</a>
        </li>
        <li class="rc-list__item">
          <a href="#/" class="rc-list__link">List item</a>
        </li>
      </ul>
    </dd>
  </div>
</dl>

Navigation & inverse colour

Below is an example of how the data-toggle-group can be applied to a navigation list structure.
The class list--inverse has also been added in this example to invert the colour of the component, similar to what is seen in the footer.

<nav data-toggle-group="" data-toggle-effect="rc-expand--vertical">
  <ul class="rc-list rc-list--blank rc-list--align rc-list--inverse" role="menubar">
    <li class="rc-list__item">
      <button class="rc-list__header" id="nav-accordion-example-header-7" data-toggle="nav-accordion-example-7" role="menuitem">Primary nav item</button>
      <ul class="rc-list rc-list--blank rc-list--align rc-list__content" id="nav-accordion-example-7" aria-labelledby="nav-accordion-example-header-7" role="menu">
        <li class="rc-list__item">
          <a class="rc-list__link" href="#/" role="menuitem">Secondary nav item</a>
        </li>
        <li class="rc-list__item">
          <a class="rc-list__link" href="#/" role="menuitem">Secondary nav item</a>
        </li>
        <li class="rc-list__item">
          <a class="rc-list__link" href="#/" role="menuitem">Secondary nav item</a>
        </li>
      </ul>
    </li>
    <li class="rc-list__item">
      <button class="rc-list__header" id="nav-accordion-example-header-397" data-toggle="nav-accordion-example-397" role="menuitem">Primary nav item</button>
      <ul class="rc-list rc-list--blank rc-list--align rc-list__content" id="nav-accordion-example-397" aria-labelledby="nav-accordion-example-header-397" role="menu">
        <li class="rc-list__item">
          <a class="rc-list__link" href="#/" role="menuitem">Secondary nav item</a>
        </li>
        <li class="rc-list__item">
          <a class="rc-list__link" href="#/" role="menuitem">Secondary nav item</a>
        </li>
        <li class="rc-list__item">
          <a class="rc-list__link" href="#/" role="menuitem">Secondary nav item</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

Mobile accordion/tabs on desktop

Creates a tabs layout on desktop and an accordion on mobile, to use this component add data-toggle-tabs to the markup like in the example below.

Accordion content

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Accordion content

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Accordion list

List item
List item
List item
List item

<dl data-toggle-group="" data-toggle-tabs="" data-toggle-effect="rc-expand--vertical">
  <div class="rc-list__accordion-item">
    <dt>
      <button class="rc-list__header" id="heading-f5be013b-fcc5-435a-9deb-32c4307d6c3a" data-toggle="content-f5be013b-fcc5-435a-9deb-32c4307d6c3a" data-js-open="true">Accordion</button>
    </dt>
    <dd class="rc-list__content" id="content-f5be013b-fcc5-435a-9deb-32c4307d6c3a" aria-labelledby="heading-f5be013b-fcc5-435a-9deb-32c4307d6c3a">
      <span class="rc-large-intro">Accordion content</span>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. </p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. </p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. </p>
    </dd>
  </div>
  <div class="rc-list__accordion-item">
    <dt>
      <button class="rc-list__header" id="heading-3476d5f3-8f89-4728-becc-66b89ece0ab2" data-toggle="content-3476d5f3-8f89-4728-becc-66b89ece0ab2">Accordion</button>
    </dt>
    <dd class="rc-list__content" id="content-3476d5f3-8f89-4728-becc-66b89ece0ab2" aria-labelledby="heading-3476d5f3-8f89-4728-becc-66b89ece0ab2">
      <span class="rc-large-intro">Accordion content</span>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. </p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. </p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. </p>
    </dd>
  </div>
  <div class="rc-list__accordion-item">
    <dt>
      <button class="rc-list__header" id="heading-fb303306-5a2b-4936-bef1-f732115dae26" data-toggle="content-fb303306-5a2b-4936-bef1-f732115dae26">Accordion with list</button>
    </dt>
    <dd class="rc-list__content" id="content-fb303306-5a2b-4936-bef1-f732115dae26" aria-labelledby="heading-fb303306-5a2b-4936-bef1-f732115dae26">
      <span class="rc-large-intro">Accordion list</span>
      <ul class="rc-list rc-list--blank rc-list--align">
        <li class="rc-list__item">
          <a href="#/" class="rc-list__link">List item</a>
        </li>
        <li class="rc-list__item">
          <a href="#/" class="rc-list__link">List item</a>
        </li>
        <li class="rc-list__item">
          <a href="#/" class="rc-list__link">List item</a>
        </li>
        <li class="rc-list__item">
          <a href="#/" class="rc-list__link">List item</a>
        </li>
      </ul>
    </dd>
  </div>
</dl>

Working together for the ultimate brand experience

Accordion

Usage

Navigation & inverse colour

Mobile accordion/tabs on desktop