Demo 3b: Tab Demo (Toggle Attribute)
How
create a toggle-group on the <tabs-wrapper>. Per <tabs-button> make it a [toggle] and give it a [toggle-value]. The first <tabs-button> has [toggle-default] applied.
Link each <tabs-panel> to the relevant <tabs-button> by setting [toggled-by="name:value"].
Showing/hiding is done via CSS, using either the tabs-button:toggle()::toggle-target or tabs-panel:toggle() selector.
Code
HTML
<tabs-wrapper toggle-group="tabs">
<tabs-bar>
<tabs-button toggle toggle-value="1" toggle-default>Button 1</tabs-button>
<tabs-button toggle toggle-value="2">Button 2</tabs-button>
<tabs-button toggle toggle-value="3">Button 3</tabs-button>
</tabs-bar>
<tabs-panels>
<tabs-panel toggled-by="tabs:1">Content 1</tabs-panel>
<tabs-panel toggled-by="tabs:2">Content 2</tabs-panel>
<tabs-panel toggled-by="tabs:3">Content 3</tabs-panel>
</tabs-panels>
</tabs-wrapper>CSS
tabs-button:toggle() {
background-color: lightgray;
}
tabs-button::toggle-target { /* Also works: tabs-panel */
display: none;
}
tabs-button:toggle()::toggle-target { /* Also work: tabs-panel:toggle() or tabs-panel:toggle(tabs) */
display: block;
}Demo (by Bramus)
ℹ Your browser does not support CSS Toggles. To cater for this a polyfill has been loaded.