Tabs

Tabbed content is created using the tab-set directive with individual tab-item blocks for each tab's content. You can embed other directives, like admonitions directly in tabs.

 ::::{tab-set} :::{tab-item} Tab #1 title This is where the content for tab #1 goes. ::: :::{tab-item} Tab #2 title This is where the content for tab #2 goes. ::: :::: 

Tabs can be grouped together by setting the group attribute to the same value for each tab-set. This allows for multiple sets of tabs to be controlled together.

You need to set both the group and sync attributes to the same value for each tab-item to sync the tabs.

This means tabs with the same group and the same sync value will be selected together.

In the following example we have three tab sets, but only the first two are grouped together. Hence, the first two tab sets will be in sync, but the third tab set will not be in sync with the first two.

 ::::{tab-set} :group: languages :::{tab-item} Java :sync: java Content for Java tab ::: :::{tab-item} Golang :sync: golang Content for Golang tab ::: :::{tab-item} C# :sync: csharp Content for C# tab ::: :::: ::::{tab-set} :group: languages :::{tab-item} Java :sync: java Content for Java tab ::: :::{tab-item} Golang :sync: golang Content for Golang tab ::: :::{tab-item} C# :sync: csharp Content for C# tab ::: :::: 

1. This is the group name
2. This is the sync name