Demo 3: Tab Demo (CSS Toggles)

← to index
CSS Toggles
Toggle Attribute
Aria Toggles

How

Per <panel-tab> create a toggle that’s part of a group. Additionally it’s sticky so that it doesn’t cycle nor go out of bounds. Link each <panel-card>’s visibility to the nearest active toggle using toggle-visibility

There currently is no way to change initial state for one toggle in a group (issue)

Code

HTML

<panel-set>
    <panel-tab>Tab 1</panel-tab>
    <panel-card>Content 1</panel-card>

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

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

CSS

panel-tab {
    toggle: tab 1 at 0 group sticky;
}

panel-tab:toggle(tab) {
  background-color: lightgray;
}

panel-card {
  toggle-visibility: toggle tab;
}

Demo (by Oddbird)

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

Tab 1

Content 1

Tab 2

Content 2

Tab 3

Content 3