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.

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

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.

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

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

html
            <dl data-toggle-group data-toggle-effect="rc-expand--vertical" role="presentation">
  <div class="rc-list__accordion-item">
    <dt role="heading">
      <button class="rc-list__header" id="accordion-header-1" data-toggle="accordion-content-1" type="button">Accordion</button>
    </dt>
    <dd class="rc-list__content" id="accordion-content-1" aria-labelledby="accordion-header-1" role="region">
      <h1 class="rc-zeta">Accordion content</h1>
      <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 role="heading">
      <button class="rc-list__header" id="accordion-header-2" data-toggle="accordion-content-2" role="button">Accordion</button>
    </dt>
    <dd class="rc-list__content" id="accordion-content-2" aria-labelledby="accordion-header-2" role="region">
      <h1 class="rc-zeta">Accordion content</h1>
      <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>
</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.

html
            <nav data-toggle-group data-toggle-effect="rc-expand--vertical" role="navigation">
  <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-header-1" data-toggle="nav-accordion-1" role="menuitem">Primary nav item</button>
      <ul class="rc-list rc-list--blank rc-list--align" id="nav-accordion-1" aria-labelledby="nav-header-1" 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>
        <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-header-2" data-toggle="nav-accordion-2" role="menuitem">Primary nav item</button>
      <ul class="rc-list rc-list--blank rc-list--align" id="nav-accordion-2" aria-labelledby="nav-header-2" 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>
        <li class="rc-list__item">
          <a class="rc-list__link" href="#/" role="menuitem">Secondary nav item</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>
        

Issues

If you are having problems implementing this code, please submit an issue on our Github page.

Github Octocat

Feedback

If you would like to offer feedback on the design of this component, please send an email requesting access to the Design Language Slack channel.

Slack logo

Changelog

  • 27th September 2018 [ui_assets/components/accordion.yml]
    Removed info about bug
  • 26th September 2018 [ui_assets/components/accordion.yml]
    Add .rc-list__accordion-item elements to wrap accordion items
  • 26th July 2018 [ui_assets/components/accordion.yml]
    Remaining prefixes
  • 25th July 2018 [ui_assets/components/accordion.yml]
    prefix styled-link
  • 19th July 2018 [ui_assets/components/accordion.yml]
    typo
  • 17th July 2018 [ui_assets/components/accordion.yml]
    add docs for having tab open on page load
  • 12th July 2018 [ui_assets/components/accordion.yml]
    Update snippets.
  • 11th July 2018 [ui_assets/components/accordion.yml]
    Added prefix to cards and type. Added prefix test page.
  • 1st June 2018 [ui_assets/components/accordion.yml]
    add accoridan disclaimer
  • 10th April 2018 [ui_assets/components/accordion.yml]
    Copy and markup udpates and added new html boilerplate
  • 29th March 2018 [ui_assets/components/accordion.yml]
    Added toggle effect type as data attribute
  • 28th March 2018 [ui_assets/components/accordion.yml]
    Updated tabs, lists and accordion documentation
  • 28th March 2018 [ui_assets/components/accordion.yml]
    Imporved example accordion markup
  • 26th March 2018 [ui_assets/components/accordion.yml]
    Added accordion page