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

Projects

Progress value is 30%

Tabs

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

View Demo

Dependencies

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 -->
</div>

⚠️ 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.

Deep Linking #

If you want to be able to share the link to a specific tab panel, you can add the data-deep-link="on" attribute to the .js-tabs element:

<div class="tabs js-tabs" data-deep-link="on">
  <!-- tabs content here -->
</div>

Each time a new tab is selected, the hash of the page is updated with the tab panel id. 

Categories

Project duplicated

Project created

Globals imported

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