Demo 3: Tab Demo (Toggle Attribute)

• ← to index
• CSS Toggles
• Toggle Attribute
• Aria Toggles

How

Set [toggle-group] on a parent to create a group. On the triggers apply [toggle] and they’ll opt-in to the group. To set a default, set [toggle-default] on a toggle.

Optionally give the toggles a [toggle-value="…"] but that’s not needed here as the <panel-card> elements are adjacent to the <panel-tab> elements.

Code

<panel-set toggle-group="tabs">
    <panel-tab toggle toggle-default>Tab 1</panel-tab>
    <panel-card>Content 1</panel-card>

    <panel-tab toggle>Tab 2</panel-tab>
    <panel-card>Content 2</panel-card>

    <panel-tab toggle>Tab 3</panel-tab>
    <panel-card>Content 3</panel-card>
</panel-set>

panel-card {
    display: none;
}
panel-card:toggle(tabs) {
    display: block;
}

Demo (by Bramus)