Tabs

The tabs feature converts a set of <details> disclosure widgets and turns them into a tab group, based on them sharing the same data-group name. For example <details data-group="my-tab-group"> or :::details{data-group="my-tab-group"}.

The <summary> text is used for the tab and the rest of the contents is placed within the tab.

If JavaScript doesn’t work, the details elements still provide a mechanism for users to expand different tabs.

You need to enable the tabs feature in your config.ts file.

Tabs demo

const example = 'example code';