Tabs

To create switchable sections of content, for example, code samples in a different language or the same content for different platforms, use a <tabs> tag.

It has the following attribute:

group

Specify a few tab groups to switch them simultaneously.

id

Specify a unique identifier to use as a link anchor and generate a meaningful URL for this tab block. You can reference and reuse any element that has an ID.

filter

Define a set of custom filters for conditionally including this tab block.

instance

Define a set of instances for conditionally filtering this tab block.

switcher-key

Make this tab block switchable depending on the selected key.

The <tab> element goes inside a <tabs> tag and has the following attributes:

title

required Specify the tab title.

group-key

Assign this key to the tabs in different groups that must be synced.

id

Specify a unique identifier to use as a link anchor and generate a meaningful URL for this tab. You can reference and reuse any element that has an ID.

filter

Define a set of custom filters for conditionally including this tab.

instance

Define a set of instances for conditionally filtering this tab.

switcher-key

Make this tab switchable depending on the selected key.

Below is a synchronously switched tabs example.