Tabs are multiple content sections (panels), accessible one at a time using control labels.
All components are based on CodyFrame.
Tabbed content is a component used to group related content, and control its visibility using labels - so that only one content panel is visible.
aria-selected="true" attribute is used to target the selected control, while the CodyFrame visibility classes are used to hide/show the content panels.
If you want to add a custom class to the content panel when it is shown (e.g., to animate its entrance), pass a
data-show-panel-class attribute to the
<div class="tabs js-tabs" data-show-panel-class="tabs__panel-is-visible">
<!-- tabs content here -->