Use the dynamic tabs component to interactively show and hide the content below the tabs based on the currently active tab item. Make sure that you initialize the component by using the data-tabs-toggle="{parentTabContentSelector}" and also apply an id attribute to the same element.

Each tab toggle button needs to have a role="tab" attribute and a data-tabs-target="{tabContentSelector}" to target the tab content element that will be shown when clicked.

Use the aria-selected="true" data attribute so that Neykart can target the currently active tab component and hide it when another is shown. If not set, it will show the first tab as active.

Apply the role="tabpanel" data attribute to every tab content element and set the id attribute which will be equal to the data-tabs-target={tabContentSelector} from the tabs toggles.

You can use multiple tab components on a single page but make sure that the id’s are different.