tabs

An accessible tabs component to help structure large amounts of content on a page.

The tabs component is based on and extended from work done by the folks over at Simply Accessible. It is a stripped down, but still accessible version of UI tabs. They are keyboard accessible and user friendly and are meant to be a starting point for you to use on a project.

Examples

Usage

<div class="tabs">
  <div class="tab-control">
    <ul class="tab-list" role="tablist">
      <li class="tab-item">
        <a href="#js-tab1" role="tab" aria-controls="js-tab1">Lorem Ipsum</a>
        <!-- This can be a link or button: <button role="tab" aria-controls="js-tab1">View Tab 1</button> -->
      </li>
      <li class="tab-item">
        <a href="#js-tab2" role="tab" aria-controls="js-tab2">Dolor sit</a>
      </li>
      <li class="tab-item">
        <a href="#js-tab3" role="tab" aria-controls="js-tab3">Consectetur</a>
      </li>
    </ul>
  </div><!-- /.tab-control -->

  <div class="tab-group">
    <div class="tab-content" id="js-tab1" role="tabpanel">
      <h2>Lorem Ipsum</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div><!-- /.tab-content -->

    <div class="tab-content" id="js-tab2" role="tabpanel">
      <h2>Dolor sit amet</h2>
      <p>In tincidunt tempor risus gravida tincidunt.</p>
    </div><!-- /.tab-content -->

    <div class="tab-content" id="js-tab3" role="tabpanel">
      <h2>Consectetur adipiscing</h2>
      <p>Suspendisse eget commodo erat. Donec a metus fringilla, pharetra ipsum nec, aliquet felis. </p>
    </div><!-- /.tab-content -->

  </div><!-- /.tab-group -->
</div><!-- /.tabs -->

					
@import '@10up/component-tabs';

						
import Tabs from '@10up/component-tabs';

new Tabs( '.tabs', {
  orientation: 'horizontal', // default is 'horizontal', can be 'vertical'
  onCreate: function() {
    console.log( 'onCreate callback' );
  },
  onTabChange: function() {
    console.log( 'onTabChange callback' );
  }
} );

						
let tabsInstance = new TenUp.tabs( '.tabs', {
  onCreate: function() {
    console.log( 'onCreate callback' );
  },
  onTabChange: function() {
    console.log( 'onTabChange callback' );
  }
} );

* Standalone JS is used on projects that are not set up to handle ES6. To use this version you will need to download the UMD bundle from the NPM and pull it into your project. The same process should be followed with the CSS if it cannot process through the NPM package.

Documentation

Installation

This component accepts two arguments, the selector for the accordion container and an object containing optional callbacks.

npm install @10up/component-tabs --save

Options

List of Options for this component
orientation Whether the tabs are horizontal or vertical, defaults to horizontal
onCreate Called after the tab is initialized on page load
onTabChange Called when a tab item is changed

Methods

List of avaliable methods
destroy() Destroys the component, removing event listeners and any extra markup and attributes.

Classes

List of Classes used for this component
.tabs Wrapping class for the tabs component.
.tab-control Wrapping class for the tab buttons.
.tab-list Class for the list containing the tab buttons
.tab-item An individual tab item.
.tab-group A group of tab content panels.
.tab-content An individual tab panel.

Browser Compatibility

List of Browser Support for this component
Chrome Latest
Firefox Latest
Edge Latest
Safari Latest
IE 11 (Standalone only)

Resources