Tabbed interface using HTML5 details element

[rzil]

Trying to make tabs using the details + summary element
the structure is great and very similiar to Functional CSS Tabs Revisited
Here is the codePen and said HTML Structure:

<details class="tab" <!--open-->>
    <summary class="tab-label">
        <h2>Tab 2</h2>
    </summary>
    <div class="tab-content">
         <p>Tab 2 Content</p>
    </div>
</details>

[rzil]

(Can’t add this to the main post for some odd reason, Sorry for double posting)-
However, suffer from the same “fixed height problem” that was fixed here

Here’s my best Shot(Can’t manage to keep labels on top)

If someone have fixes/opinions/improvement ideas please share

it works on Chrome which support details, and suprisingly IE and Firefox too

[Author]

Posts