Demo 3b: Tab Demo (CSS Toggles, sticky)

How

Per <tabs-button> 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 <tabs-panel>’s visibility to the active toggle by using some selector magic because toggle-visibility does not work here due to the structure of the markup (see nits embedded in the source code)

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

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-button {
    toggle: tab 1 at 0 group sticky;
    cursor: pointer;
}

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

tabs-panel {
    display: none;
}
tabs-bar:has(tabs-button:toggle(tab):nth-child(1)) + tabs-panels tabs-panel:nth-child(1),
tabs-bar:has(tabs-button:toggle(tab):nth-child(2)) + tabs-panels tabs-panel:nth-child(2),
tabs-bar:has(tabs-button:toggle(tab):nth-child(3)) + tabs-panels 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