Css Tabs Component

Jurgen 2 minutes to read

A mobile first tabbed component without javascript

Tabbed content is a fine solution to present relevant, but not must read, information in a dense format. The details/summary is used as tab switcher and label, however it does not contain the content. That is placed in a div after the details/summary. This way the content can be animated smooth and cross browser and not jumpy like with the allow-discrete

Html setup for the component.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

<section class="tabs tabbed">
    <details name="tab" open>
        <summary>Tab 1</summary>
    </details>
    <div class="details-content">
        <u>Content for tab 1.</u> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <details name="tab">
        <summary>Tab 2</summary>
    </details>
    <div class="details-content">
        <u>Content for tab 2.</u> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <details name="tab">
        <summary>Tab3</summary>
    </details>
    <div class="details-content">
        <u>Content for tab 3.</u> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</section>

Below in the files is the complete html setup.

Direct links to the file: Html styled result