Accordions

<!-- Accordion Group -->
<!-- Multiple accordion elements can be placed within the group element. -->
<div data-c-accordion-group>
    <!-- Accordion -->
    <div data-c-accordion>
        <button aria-expanded="false" data-c-accordion-trigger tabindex="0" type="button">
            <div data-c-padding="all(1)">
                <!-- Title -->
                <p data-c-font-weight="bold">Accordion Title</p>
                <!-- Optional Subtitle -->
                <p data-c-margin="top(.25)" data-c-colour="c1">Accordion Subtitle</p>
            </div>
            <span data-c-visibility="invisible">Click to view...</span>
            <i aria-hidden="true" data-c-accordion-add data-c-colour="c1" data-c-font-size="h3" data-c-font-weight="bold">+</i>
            <i aria-hidden="true" data-c-accordion-remove data-c-colour="c1" data-c-font-size="h3" data-c-font-weight="bold">-</i>
        </button>
        <div aria-hidden="true" data-c-accordion-content data-c-padding="rl(1)">
            <div data-c-padding="bottom(1)">
                <!-- Accordion Content -->
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem atque ad quos placeat quidem earum corrupti? Ad, distinctio, maxime quasi illum ex consectetur necessitatibus et soluta quo sit ratione maiores.</p>
            </div>
        </div>
    </div>
</div>

Detailed Information

<div data-c-accordion-group="(alt)"></div>

The group attribute is used to define a group of accordions and is required even in the event that a single accordion exists. The alt argument can be used to force the accordion group to alternate between white and the assigned colour set in the variable $clone-accordion-alternating-background-colour. If alt is omitted you can use data-c-background to assign a custom background colour to the data-c-accordion-trigger element.

<div data-c-accordion></div>

The accordion attribute defines a single accordion within the group.

<div data-c-accordion-trigger></div>

The trigger attribute defines the individual trigger for a single accordion.

<div data-c-accordion-add></div>, <div data-c-accordion-remove></div>

These attributes define the dynamic icons that visually indicate the status of the accordion as being opened or collapsed.

<div data-c-accordion-content></div>

The content attribute defines the markup that contains the accordion's body content.

Examples

Changelog

Version 2.4.17

• Added a custom focus state for accordion triggers.

Version 2.4.16

• Fixed a bug where a true value on the data-c-accordion attribute would cause the component to break.

Version 2.4.11

• Removed data-c-heading value on accordion triggers in the example code to accommodate support for the new heading system.

Version 2.4.1

• Removes forced borders from accordions in favor of the border property.
  • This also means the border colour variable for accordions has been removed.

Version 2.3.12

• Updates pieces of accordions, alerts, carousels so that their data attributes are specific instead of values.

Version 2.3.2

• Fixes a bug with accordion alternating colours being too light.