HTML Details Tag

Overview

Visualize a component similar to an accordion, which supports keyboard interaction right out of the box and doesn't depend on JavaScript for its functionality.

That's what the details tag brings to the table.

Example

This is what the inside of a details tag looks like.

The details tag provides a straightforward accordion experience by default, which is excellent. However, its potential extends further—what if it could function as a tab control?

Transforming

While tabs and accordions share similar underlying mechanics, tabs usually require distinct parent and child containers for the tabs and their respective contents.

Another key difference is their interactivity; accordions can be manipulated individually, but tab interfaces maintain one active tab at all times.

Initially, it might seem challenging to adapt the details tag for tab functionality due to structural, layout, and functional discrepancies, but these challenges can be addressed with a closer examination.

Leveraging CSS

By utilizing the CSS property display: contents;, it's possible to visually eliminate the boundaries of the details tags, allowing their contents to blend seamlessly within the document flow.

Imagine having several small containers each filled with a mix of distinct items. These containers can only interact at a surface level, not allowing deeper interaction among the contained items. With display: contents;, it's as though these barriers are removed, mixing everything into one coherent group.

Now, all elements within the details tags can be reorganized flexibly using CSS's display: flex; and order properties, creating a clean separation of tabs and their content while maintaining a fluid layout.

Enhancing User Experience

Although the goal was to minimize JavaScript usage, achieving a true tab-like behavior requires minimal scripting. This involves monitoring attribute changes and preventing toggling actions from keyboard and mouse that conflict with expected tab functionality.

The essential behavior to implement is keeping one tab active at all times, which involves toggling sibling details tags appropriately when a new tab is activated.

How to Use the Details Tag for Creating CSS Tabs Preview