Tabs

The dropdowns component allows for the use of .on-click and .on-hover modifier classes for dropwns. These modifiers can be used by initiating the tabs JavaScript using the init() method.

tabs.init();
<div class="tabs">
  <nav class="tabs-nav">
    <ul>
      <li class="active"><a href="#tabs-panel-1">...</a></li>
      <li><a href="#tabs-panel-2">...</a></li>
      <li><a href="#tabs-panel-3">...</a></li>
      ...
    </ul>
  </nav>
  <div class="tabs-content">
    <div id="tabs-panel-1" class="tabs-panel active">...</div>
    <div id="tabs-panel-2" class="tabs-panel">...</div>
    <div id="tabs-panel-3" class="tabs-panel">...</div>
    ...
  </div>
</div>

Tab Content 1

Tab Content 2

Tab Content 3

Tab Content 4

Tab Content 5

For more information on how to use and customize the tabs markup and styles, take a look at the tabs block documentation.

Options

When initiating the tabs component, you can pass in the following options to override defaults.

Parameter Type Default Description
classTrigger String 'tabs-nav' Class name for tab triggers wrap
classWrap String 'tabs' Class name for tabs wrapper
classContent String 'tabs-content' Class name for tabs content
classActive String 'active' Class name for active state

.init()

Initializes the tabs component using either default settings or custom options passed in.

tabs.init( options )
Parameter Type Description
options JSON Custom options for component

.destroy()

Destroys the tabs component by removing event listeners and clearing the settings variable.

tabs.destroy()