Royal Canin Logo

Working together for the ultimate brand experience

Royal Canin Design Language

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.

Accordion list
<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-348" data-toggle="content-348" data-js-open="true">Accordion</button>
    </dt>
    <dd class="rc-list__content" id="content-348" aria-labelledby="heading-348">
      <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-412" data-toggle="content-412">Accordion</button>
    </dt>
    <dd class="rc-list__content" id="content-412" aria-labelledby="heading-412">
      <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-652" data-toggle="content-652">Accordion with list</button>
    </dt>
    <dd class="rc-list__content" id="content-652" aria-labelledby="heading-652">
      <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>

Copied!

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-579" data-toggle="nav-accordion-example-579" role="menuitem">Primary nav item</button>
      <ul class="rc-list rc-list--blank rc-list--align rc-list__content" id="nav-accordion-example-579" aria-labelledby="nav-accordion-example-header-579" 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-651" data-toggle="nav-accordion-example-651" role="menuitem">Primary nav item</button>
      <ul class="rc-list rc-list--blank rc-list--align rc-list__content" id="nav-accordion-example-651" aria-labelledby="nav-accordion-example-header-651" 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>

Copied!

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.

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.

Accordion list
<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-e5d37920-078b-41da-b155-d9e7b929d71f" data-toggle="content-e5d37920-078b-41da-b155-d9e7b929d71f" data-js-open="true">Accordion</button>
    </dt>
    <dd class="rc-list__content" id="content-e5d37920-078b-41da-b155-d9e7b929d71f" aria-labelledby="heading-e5d37920-078b-41da-b155-d9e7b929d71f">
      <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-10e211b9-c79f-46c2-8f1a-ce0a4b406d0f" data-toggle="content-10e211b9-c79f-46c2-8f1a-ce0a4b406d0f">Accordion</button>
    </dt>
    <dd class="rc-list__content" id="content-10e211b9-c79f-46c2-8f1a-ce0a4b406d0f" aria-labelledby="heading-10e211b9-c79f-46c2-8f1a-ce0a4b406d0f">
      <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-7cd24d1f-8ee8-4fa0-87d4-54b21c7fc597" data-toggle="content-7cd24d1f-8ee8-4fa0-87d4-54b21c7fc597">Accordion with list</button>
    </dt>
    <dd class="rc-list__content" id="content-7cd24d1f-8ee8-4fa0-87d4-54b21c7fc597" aria-labelledby="heading-7cd24d1f-8ee8-4fa0-87d4-54b21c7fc597">
      <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>

Copied!