Demo 3b: Tab Demo (CSS Toggles, cycle-on)

How

Set a toggle-root on the <tabs-wrapper> with a max value of the number of tabs + a default of 1. Per <tabs-button> change its value.

Link each <tabs-panel>’s visibility to the active toggle value by using some selector magic and :toggle() because toggle-visibility does not work here due to the structure of the markup + it cannot be used to target a specific value (see nits embedded in the source code)

Code

HTML 
<tabs-wrapper>
    <tabs-bar>
        <tabs-button>Button 1</tabs-button>
        <tabs-button>Button 2</tabs-button>
        <tabs-button>Button 3</tabs-button>
    </tabs-bar>
    <tabs-panels>
        <tabs-panel>Content 1</tabs-panel>
        <tabs-panel>Content 2</tabs-panel>
        <tabs-panel>Content 3</tabs-panel>
    </tabs-panels>
</tabs-wrapper>
CSS 
tabs-wrapper {
    toggle-root: tab 3 at 1;
}

tabs-button:nth-child(1) {
    toggle-trigger: tab 1;
}
tabs-button:nth-child(2) {
    toggle-trigger: tab 2;
}
tabs-button:nth-child(3) {
    toggle-trigger: tab 3;
}

tabs-button:nth-child(1):toggle(tab 1),
tabs-button:nth-child(2):toggle(tab 2),
tabs-button:nth-child(3):toggle(tab 3) {
    background-color: lightgray;
}

tabs-panel {
    display: none;
}
tabs-wrapper:toggle(tab 1) tabs-panel:nth-child(1),
tabs-wrapper:toggle(tab 2) tabs-panel:nth-child(2),
tabs-wrapper:toggle(tab 3) tabs-panel:nth-child(3) {
    display: block;
}

Demo (by Bramus)

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

Button 1 Button 2 Button 3 Content 1 Content 2 Content 3