Toggle

When to use it

This component relies on the data-toggle attribute for its functionality and .c-toggle (optional) for the ”dropdown” look. Use data-toggle="targetID" on links and buttons to trigger hide/show functionality on element(s) with corresponding ID:s.

Toggling multiple elements are supported (on triggers other than radio buttons) via space separated ID:s, e.g. data-toggle="target1 target2".

Important

If the targets have different states (e.g. one opens and one closes) please skip the .c-toggle class altogether, as it will just be confusing which target element it correlates to.

TIP

Typically, you'll want the target element to have the hidden state as default and show it with a click on the button. This is achieved by adding the .u-hidden class (see Hide), but don't forget to add the aria-expanded="true" attribute as well, or the initial state indication will be wrong!

What it looks like

Code examples

Link

<a href="#" class="c-toggle" data-toggle="target1">Show box</a>
<div class="c-box u-hidden" id="target1">Target element 1</div>

Button, target shown

<button type="button" class="c-button c-toggle" data-toggle="target2" aria-expanded="true">Hide box</button>
<div class="c-box" id="target2">Target element 2</div>

Button, small

<button type="button" class="c-button c-button--small c-toggle" data-toggle="target3">Show box</button>
<div class="c-box u-hidden" id="target3">Target element 3</div>

Multiple targets

<button type="button" class="c-button" data-toggle="target4 target5">Toggle boxes</button>
<div class="c-box c-box--info" id="target4">Target element 4</div>
<div class="c-box u-hidden" id="target5">Target element 5</div>

Radio buttons

<fieldset>
    <legend class="c-legend">Radios</legend>
    <div class="c-form-control">
        <input type="radio" name="radio-toggle" id="radio1" data-toggle="radio-1" checked>
        <label for="radio1" class="c-label">Radio 1</label>
        <div class="u-margin-left--large c-box c-box--info" id="radio-1">Radio 1 info</div>
    </div>
    <div class="c-form-control">
        <input type="radio" name="radio-toggle" id="radio2" data-toggle="radio-2">
        <label for="radio2" class="c-label">Radio 2</label>
        <div class="u-margin-left--large c-box c-box--info" id="radio-2">Radio 2 info</div>
    </div>
    <div class="c-form-control">
        <input type="radio" name="radio-toggle" id="radio3" data-toggle="radio-3">
        <label for="radio3" class="c-label">Radio 3</label>
        <div class="u-margin-left--large c-box c-box--info" id="radio-3">Radio 3 info</div>
    </div>
</fieldset>

Accessibility notes

If the data-toggle attribute is present and they point to existing ids on the same page, the accessible tabs functionality is created automatically to show/hide them (see components.toggle.js). If you're making your own JS implementation of the same feature, try to follow these guidelines: