Quick tabs

  • html
  • tab
  • details
  • css
3 min read

This week, I’m revisiting my favorite topic: CSS. I’d like to demonstrate an awesome and easy way to create accessible tabs. The concept really caught my attention when I first encountered it.

What is the <details>?

The <details> HTML tag allows developers to implement an accordion-like widget without writing any JavaScript. The beauty lies in the fact that we can leverage the capabilities of the platform without the need for any JavaScript logic. It consists of a summary and a larger description that can be toggled.

<details>
  <summary>Who are you?</summary>
  I used to be an adventurer like you. Then I took an arrow in the knee.
</details>

Who are you? I used to be an adventurer like you. Then I took an arrow in the knee.

What is the display: contents?

Traditionally, every rendered HTML element is displayed using multiple boxes: content, padding, border, and margin. New developers typically realize this when first using box-sizing: border-box.

I’m wrapped in deep

There is a less widely none CSS attribute called: display: contents. It gives us a backdoor to render only the very “inner part” (content) of the element.

I’m free

Why is it useful? For example, we can align various content of a parent next to each other without using Flex or Grid, while also keeping the markup intact.

Implementing a tab widget

“That’s cool,” you may say, “but what’s the point?” Let’s dig deeper!

Recently, I found a fascinating use-case of the <details> element that leverages the benefits of display: contents. By default, the Flow layout treats all children separately, and you have to use another layout algorithm to align them. However, with a little bit of CSS magic, we can allow the children to interact with each other. This means we can use the Flexbox algorithm to align and order their content without compromising the integrity of the markup.

Demo

You can see a working example below.

The details tag

An awesome tool to create an accordion 🪗 that can be toggled.

Where contents can help?

Remove the extra layers (margin, padding, etc.) around the content. It helps to let the children interact with each other ✨.

Alternatives

Nearly all component libraries offer a tab-like interface, but not all of them in a way that’s fully supported by the platform. Most either reimplement it in JavaScript or rely on third-party libraries that do the same thing.

Web Components provide another way to leverage the platform. You can use libraries like Shoelace, for example.

So, what’s the benefit of this solution, you may ask? Well, until it’s natively supported, you can enjoy the following:

References

Back to top