Standard Life Digital Framework

Content Accordion

full screen new window example HTML markup

The content accordion has multiple sections for displaying content where each section can be toggled to be visible or hidden.

Usage

The component is a group of toggles each with a panel to hold information.

This component is built using a group of toggle elements each controlling a collapsible panel element and functionality can be added using vanilla javascript or bootstrap's collapse plugin.

Using javascript:

Each panel should have a class slb-collapse.
To show and hide the panel dynamically add and remove the class slb-show on the panel.
The slb-show class is created in a way to allow transitions, to enable transitions when setting slb-show you must set the height of the element dynamically.

Using bootstrap's collapse plugin:

The toggle element must include the attributes data-toggle="collapse" and data-target="#PANEL-ELEMENT-ID" and the class collapsed if the associated panel element is hidden when the component is first rendered.
The panel element must include the class collapse. Additionally if the panel is required to be visible when the component is first rendered, add the class show along with the collapse class.
Bootstrap collapse will also manage the modification of the accessibility attributes on the component. The initial state of an accordion, such as when a panel is visible, must be reflected in the accessibility attribute values i.e. set aria-expanded="true" when a panel is visible when first rendered.

Accessible Attributes

Accessible attribute	Description
`aria-expanded="true"`	This attribute is added to the toggle of the accordion and is should be set to true if an accordion is to be expanded when first rendered.
`aria-controls="ID"`	This attribute is added to the toggle of the accordion and the value is set to the ID of the panel element that the toggle controls.
`aria-labelledby="IDREF"`	This attribute is added to the panel of the accordion and the value is set with the associated toggle element's ID to link both together.

JavaScript Support

JavaScript Support class name	Description
`slb-show`	This class is added to the accordion toggle when using vanilla javascript.
`data-toggle="collapse"`	Use on toggle element to control the collapsing panel element.
`data-target="#PANEL-ELEMENT-ID"`	Use on toggle element to control the collapsing panel element. (See bootstrap collapse plugin documentation)
`data-parent="#UNIQUE-ACCORDION-PARENT_ID"`	Use on the parent element to group all children to the parent element. (See bootstrap collapse plugin documentation)
`collapse`	Use on panel element to indicate that this element is a collapsing element. (See bootstrap collapse plugin documentation)
`show`	Use on panel element to set panel to initially display. (See bootstrap collapse plugin documentation)

Content Accordion

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.

Content Accordion

Markup: accordion\accordion-content.hbs

Copy

<div class="slb-content-accordion" id="content-accordion-id" aria-label="Content Accordion">
    <div class="slb-content-accordion__item">
        <button class="slb-content-accordion__toggle collapsed" id="accordion-toggle-1" data-toggle="collapse" data-target="#content-accordion-panel-1" aria-expanded="false" aria-controls="content-accordion-panel-1">
            Content Accordion
            <svg viewBox="0 0 448 512" class="slb-content-accordion__toggle-icon" id="chevron-down-1"><title>chevron-down</title><path d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"/></svg>
        </button>
        <div class="slb-content-accordion__panel collapse" id="content-accordion-panel-1" aria-labelledby="accordion-toggle-1">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
        </div>
    </div>
    <div class="slb-content-accordion__item">
        <button class="slb-content-accordion__toggle collapsed" id="accordion-toggle-2" data-toggle="collapse" data-target="#content-accordion-panel-2" aria-expanded="false" aria-controls="content-accordion-panel-2">
            Content Accordion
            <svg viewBox="0 0 448 512" class="slb-content-accordion__toggle-icon" id="chevron-down-2"><title>chevron-down</title><path d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"/></svg>
        </button>
        <div class="slb-content-accordion__panel collapse" id="content-accordion-panel-2" aria-labelledby="accordion-toggle-2">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
        </div>
    </div>
    <div class="slb-content-accordion__item">
        <button class="slb-content-accordion__toggle collapsed" id="accordion-toggle-3" data-toggle="collapse" data-target="#content-accordion-panel-3" aria-expanded="false" aria-controls="content-accordion-panel-3">
            Content Accordion
            <svg viewBox="0 0 448 512" class="slb-content-accordion__toggle-icon" id="chevron-down-3"><title>chevron-down</title><path d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"/></svg>
        </button>
        <div class="slb-content-accordion__panel collapse" id="content-accordion-panel-3" aria-labelledby="accordion-toggle-3">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
        </div>
    </div>
    <div class="slb-content-accordion__item">
        <button class="slb-content-accordion__toggle collapsed" id="accordion-toggle-4" data-toggle="collapse" data-target="#content-accordion-panel-4" aria-expanded="false" aria-controls="content-accordion-panel-4">
            Content Accordion
            <svg viewBox="0 0 448 512" class="slb-content-accordion__toggle-icon" id="chevron-down-4"><title>chevron-down</title><path d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"/></svg>
        </button>
        <div class="slb-content-accordion__panel collapse" id="content-accordion-panel-4" aria-labelledby="accordion-toggle-4">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
        </div>
    </div>
    <div class="slb-content-accordion__item">
        <button class="slb-content-accordion__toggle" id="accordion-toggle-5" data-toggle="collapse" data-target="#content-accordion-panel-5" aria-expanded="true" aria-controls="content-accordion-panel-5">
            Content Accordion
            <svg viewBox="0 0 448 512" class="slb-content-accordion__toggle-icon" id="chevron-down-5"><title>chevron-down</title><path d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"/></svg>
        </button>
        <div class="slb-content-accordion__panel collapse show" id="content-accordion-panel-5" aria-labelledby="accordion-toggle-5">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
        </div>
    </div>
</div>

Source: components/_accordion.scss