Tabs with CSS and no JavaScript

Getting functioning tabs in your web app has typically required JavaScript. Not anymore.

For such a ubiquitous UI element, this should be achievable with pure HTML and CSS, and leave the heavy-lifting to JavaScript. This post achieves exactly that.

The techniques used are simple:

• Flexbox for layout
• Radio buttons to control which the active tab
• CSS sibling selectors to hide/show tab content.

The tabs can be of any height, and can be of different heights. You don’t need to define a width for the container either.

Here’s the basic markup you’d need:

<div class="tabs-container">
    <!-- the part to repeat... -->
    <input type="radio" id="tab-1" name="my-tabs" checked>
    <label for="tab-1" class="tab-label">Tab 1</label>
    <div class="tab-content">Tab 1 Content Here.</div>
    <!-- -->
</div>

… repeat for any number of tabs you have.

Code

Note: I’m using SCSS for convenience. If you need raw CSS, just use something like SassMeister

And here is the full source available as a Gist: