Standard Life Digital Framework

Collapse

full screen new window example HTML markup

The collapse transtion will collapse the contents height to show and hide.

Usage

The collapse should be used whenever content should be collapsed hidden from the user, some common usages are:

Accordion
Navigation Bar

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.

In some cases, like the accordion, it may be needed to add or remove the slb-collapsed class on the toggle to dynamically change the button that was selected.

Accessible attributes

Accessible attribute	Description
`aria-expanded`	This is a boolean value set on the toggle button that should be true when the buttons panel is expanded and false when it is collapsed
`aria-labelledby`	This should be set on the panel to the ID reference of the button that controls it.

JavaScript Support

JavaScript Support class name	Description
`slb-collapse`	Default behaviour of the collapse
`slb-show`	Display the collapse transition

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: transitions\transition-collapse.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 slb-collapsed" id="accordion-toggle-1" 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 slb-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 slb-collapsed" id="accordion-toggle-2" 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 slb-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 slb-collapsed" id="accordion-toggle-3" 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 slb-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 slb-collapsed" id="accordion-toggle-4" 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 slb-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 slb-collapsed" id="accordion-toggle-5" 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 slb-collapse" 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/_transitions.scss