Demo 2: Accordion (Toggle Attribute)

How

Set a [toggle] on the <dt> elements. Hook up the <dd> elements using :toggle().

Optionally, give the toggles a name using [toggle-name="value"], and refer to the named toggles using :toggle(name). This is not needed here because the <dd> is not a toggle in itself, so it’ll walk the dom tree “up and out” to find the nearest toggle.

Code

HTML

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

    <dt toggle toggle-name="trigger">Toggle item visibility</dt>
    <dd>Content for “Toggle item visibility”</dd>

    <dt toggle toggle-name="trigger">Style the summary</dt>
    <dd>Content for “Style the summary”</dd>
</dl>

CSS

.accordion > dt {
    list-style-type: '👉🏽 ';
}
.accordion > dt:toggle() {
    list-style-type: '👇🏽 ';
}
        
.accordion > dd {
    display: none;
}
.accordion > dd:toggle() {
    display: block;
}

Demo (by Bramus)

ℹ Your browser does not support Toggle Attributes. To cater for this a (rough) 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”