The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Tabbed interface using HTML5 details element

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #189523

    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>
        <div class="tab-content">
             <p>Tab 2 Content</p>

    (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

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.