Demo 2: Accordion (CSS Toggles)

← to index
CSS Toggles
Toggle Attribute
Aria Toggles

How

Set a toggle on an item. Adjacent siblings their visibility can be affected by the toggle by means of the toggle-visibility property.

Code

HTML

<dl class="accordion">
    <dt>Establish a toggle</dt>
    <dd>Content for “Establish a toggle”</dd>

    <dt>Toggle item visibility</dt>
    <dd>Content for “Toggle item visibility”</dd>

    <dt>Style the summary</dt>
    <dd>Content for “Style the summary”</dd>
</dl>

CSS

.accordion > dt {
    toggle: glossary;
    list-style-type: '👉🏽 ';
}

.accordion > dt:toggle(glossary) {
    list-style-type: '👇🏽 ';
}

.accordion > dd {
    toggle-visibility: toggle glossary;
}

Demo (by Oddbird)

ℹ Your browser does not support CSS Toggles. To cater for this a polyfill has been loaded.

Establish a toggle: Content for “Establish a toggle”
Toggle item visibility: Content for “Toggle item visibility”
Style the summary: Content for “Style the summary”