🎉 Black Friday deal! 25% off your first year of CodyHouse Pro →


Progress value is 30%


Tabs are multiple content sections (panels), accessible one at a time using control labels.

Copy: View demo


All components are based on CodyFrame.

How to

Tabbed content is a component used to group related content, and control its visibility using labels - so that only one content panel is visible.

The 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 .js-tab element:

<div class="tabs js-tabs" data-show-panel-class="tabs__panel-is-visible">
  <!-- tabs content here -->

⚠️ Important: make sure the value of the href attribute of the control label matches the id of the associated panel so that if Javascript is disabled, each label links to the appropriate panel.


✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us