Skeletabs

About Skeletabs

Skeletabs is an open source jQuery plugin that provides tabbed browsing feature to your web contents. It is focused on accessibility and scalability above all else, and is designed to support convenience of screen readers and keyboard users, as well as to encourage developers' creative uses.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore magni sapiente deleniti, vel veniam molestias dolor minima esse voluptatibus totam molestiae cum fugit blanditiis beatae, itaque maiores iusto, consectetur asperiores!

Ad assumenda totam provident quae facilis molestiae porro dolore, ab quod, commodi accusamus dignissimos repudiandae? Dolore tenetur, veniam illo recusandae deserunt itaque quas maiores saepe ipsa iste nesciunt, magni doloribus!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae accusantium iure, esse ratione ipsum laborum inventore consequuntur, dignissimos dolore perspiciatis alias aspernatur culpa. Ducimus saepe aliquid repudiandae quibusdam numquam dolor!

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum voluptate quo ea commodi totam aut aliquam quasi, corrupti nulla, eligendi ullam quas deserunt, sequi praesentium tempore quidem dolor. Sequi, voluptatum.

Quo dolor laudantium recusandae quod ullam iure tempora sint voluptates, molestiae nobis quisquam, eligendi dolore enim harum magnam. Unde assumenda sunt fuga aliquid laboriosam, delectus et deserunt inventore fugit ea.

Optio tempore sunt nostrum repellat temporibus architecto inventore amet labore et quo. Molestias et similique, illum autem repudiandae maiores tempora at possimus inventore amet deleniti nisi sunt? Adipisci, dolorum rem!

Browser support

Skeletabs works on all ECMAScript 5 compliant browsers. We have no plan to support IE 8 and prior that are unable to parse compressed source codes.

Which version of jQuery do I need?

v1.7.0 and higher versions are supported. (slim versions provided with v3.x will not work.)

Get started

Find the latest release

Please download the latest version of Skeletabs. Ready-to-use resources are located in /dist folder.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="skeletabs.css" />
  </head>
  <body>
    <script src="jquery.js"></script>
    <script src="skeletabs.js"></script>
  </body>
</html>

Embed downloaded resources like above.
Skeletabs expects jQuery to be loaded beforehand.
The CSS file contains opinionated themes and effects. You don't need to include it if you are going to create your own look and feel.

HTML

Skeletabs parses the HTML structure based on class attributes. Please assign relevant classes to your elements within the tree.

<div><!-- container -->
  <ul class="skltbs-tab-group"><!-- tabGroup -->
    <li class="skltbs-tab-item"><!-- tabItem -->
      <button class="skltbs-tab">{{Tab 1}}</button><!-- tab -->
    </li>
    <li class="skltbs-tab-item">
      <button class="skltbs-tab">{{Tab 2}}</button>
    </li>
  </ul>
  <div class="skltbs-panel-group"><!-- panelGroup -->
    <div class="skltbs-panel">{{Panel 1}}</div><!-- panel -->
    <div class="skltbs-panel">{{Panel 2}}</div>
  </div>
</div>

The plugin generates an id for all tabs and panels to meet the accessiblity requirements. (Unless they're already given one.)

<div class="skltbs-panel-group">
  <div class="wrapper">
    <div class="another-wrapper">
      <div class="skltbs-panel">{{Panel 1}}</div>
      <div class="skltbs-panel">{{Panel 2}}</div>
    </div>
  </div>
</div>

You can add any wrapping elements between the panelGroup and the panels. Please note that panels should stay siblings.

CSS

The plugin comes with a couple of built-in themes: light / dark. You can enable them just by adding a CSS class with skltbs-theme- prefix to the container element.

<!-- container -->
<div class="skltbs-theme-light">...</div>

Likewise, 4 different types of effect are available — fade / fade-toggle / drop / rotate — which can be applied using a use- prefixed class.

<!-- container -->
<div class="skltbs-theme-light use-fade">...</div>

For more information, please refer to the theme and transition effects section.

JS

Once DOM is ready, you can now initialize Skeletabs like next:

$('#container').skeletabs();

And below is the configuration syntax for custom options:

$('#container').skeletabs({
  startIndex: 2
});

Autoinit without JS

You can omit the JS portion descripbed above and activate Skeletabs by using data-skeletabs attribute of the container element.

<!-- container -->
<div data-skeletabs>...</div>

data-skeletabs attribute accepts a JSON object to configure custom options.

<!-- container -->
<div data-skeletabs='{ "autoplay": true, "panelHeight": "adaptive" }'>...</div>

data-skeletabs-class attributes is used to configure custom CSS class names.

<!-- container -->
<div data-skeletabs-class='{ "panelGroup": "content", "panel": "section" }'>...</div>

<!-- container -->
<div data-skeletabs-class="myprefix">...</div>

A JSON object will modify classes that match the object keys.
A string will replace skltbs prefix.

More information about customzing options and class names can be found in options section.

Demo

Here are some example code recipes for different use cases. For more details, please read options section.

Default

$('#container').skeletabs();

Starting index

$('#container').skeletabs({ startIndex: -1 });

Disabled panels

startIndex value will be shifted to the next available index if it is in the disabledIndex list. Example below demonstrates starting index being changed from 0 to 1 as the index 0 is disabled.

$('#container').skeletabs({ disabledIndex: [0, 3] });

React to mouseover

$('#container').skeletabs({ selectEvent: "hover" });

Equalize panel heights

$('#container').skeletabs({ panelHeight: 'adapt' });

Adaptive panel heights

$('#container').skeletabs({ panelHeight: 'adaptive' });

No responsive layout

$('#container').skeletabs({ breakpoint: 0 });

Deactivate below responsive breakpoint

$('#container').skeletabs({ breakpointLayout: "destroy" });

Accordion configuration

Transform to accordion when the viewport is <1200px wide
Use slide animation on panels in accordion mode.

$('#container').skeletabs({ breakpoint: 1200, slidingAccordion: true });

Autoplay

$('#container').skeletabs({
  autoplay: true,
  autoplayInterval: 5000
});

Manual type keyboard navigation

Move focus with arrow key inputs, and activates the key after Enter or Space being pressed.

$('#container').skeletabs({
    keyboard: 'focus'
  });

Sensitivity control for layout update

resizeTimeout option is used to control the limit of layout updates while resizing viewport. If affects the toggle between the tabs and accordion layout, as well as panelHeight settings. (Resize your window to see this in action.)

The lower the value, the faster the update is, and the higher the value, the less often reflow will occur, resulting in better performance.

$('#container').skeletabs({ resizeTimeout: 500, panelHeight: 'equal' });

URL hash change

history option determines whether you want to change the hash in the address as you move between panels. Default value is 'replace' and it updates the URL, and setting it to 'push' will add ability to navigate back and forth on top of that.

If this options is set to false, it ensures there will be no hash update.

$('#container').skeletabs({ history: 'push' });

Option configurations

Skeletabs takes 2 optional parameters: opions & classNames.

$(selector).skeletabs(options, classNames);

Options

Here's the summarized version of default options.

{
  autoplay: false,
  autoplayInterval: 3000,
  breakpoint: 640,
  breakpointLayout: 'accordion',
  disabledIndex: null,
  history: 'replace', // 'replace' | 'push' | false
  keyboard: 'select', // 'select' | 'focus' | false
  keyboardAccordion: 'vertical',
  keyboardTabs: 'horizontal',
  panelHeight: 'auto', // 'auto' | 'equal' | 'adaptive'
  pauseOnFocus: true,
  pauseOnHover: false,
  resizeTimeout: 100,
  selectEvent: 'click', // 'click' | 'hover'
  slidingAccordion: true,
  startIndex: 0,
  transitionDuration: 500,
}

Key	Type	Default	Description
autoplay	`boolean`	`false`	Automatically move forward to next panel.
autoplayInterval	`number`	`3000`	Time gap of autoplay cycle. (in milliseconds)
breakpoint	`number` `false`	`640`	Transform to alternative layout when viewport width is below this point. (in px, inclusive) `0` will disable alternative layout. Unrealistically large numbers like `100000` will virtually set it to constant alternative layout.
breakpointLayout	`'accordion'` `'destroy'`	`'accordion'`	The type of alternative layout to use below the responsive breakpoint above. `'accordion'` — Use accordion layout. `'destroy'` — Deactivate Skeletabs. (Will reactivate when the viewport resizes back to the main layout range.)
disabledIndex	`number` `array`	`null`	Index of tab(s) to disable. Can be an array type to describe multiple indice to disable.
history	`'replace'` `'push'` `false`	`'replace'`	The behavior of History API updating hash in URL. `'replace'` — Update the hash. `'push'` — Update the hash, and allows you to go back and forth using browser buttons. It will work in browsers with History API enabled. `false` — Do not update the hash.
keyboard	`'select'` `'focus'` `false`	`'select'`	Navigate back and forth with a specific set of keys. `↑` — Move to previous tab in vertical layout. `↓` — Move to next tab in vertical layout. `←` — Move to previous tab in horizontal layout. `→` — Move to next tab in horizontal layout. `Home` — Move to the first tab. `End` — Move to the last tab. Next values are valid: `'select'` — Move to the focused tab. `'focus'` — Move focus to the target tab, and move after either `Enter` or `Space` key is pressed. `false` — Do not respond to keyboard inputs.
keyboardTabs	`'horizontal'` `'vertical'`	`'horizontal'`	Determines which of the arrow keys should be used in tabs mode.
keyboardAccordion	`'horizontal'` `'vertical'`	`'vertical'`	Determines which of the arrow keys should be used in accordion mode.
panelHeight	`'auto'` `'equal'` `'adaptive'`	`'auto'`	Adjust height of panels. `'auto'` — Do nothing. `'equal'` — Adjust the height of all panels evenly to the highest. `'adaptive'` — Update height of panelGroup to fit currently active panel's.
pauseOnFocus	`boolean`	`true`	Pause autoplaying while having focus on any child element, and resume after losing focus.
pauseOnHover	`boolean`	`false`	Pause autoplaying while having mouse pointer over, and resume after the mouse pointer leaves.
resizeTimeout	`number`	`100`	Time delay before performing any layout update, while viewport is being resized. (in milliseconds) Affects the toggle between the tabs and accordion layout, as well as `panelHeight` settings.
selectEvent	`'click'` `'hover'`	`'click'`	Type of event to listen for. Setting it to `'hover'` will respond to mouse hover events.
slidingAccordion	`boolean`	`false`	Use sliding effect in accordion layout.
startIndex	`number`	`0`	Index of the initially active panel. Negative index can be used to select from the end. (`-1` is the last panel)
transitionDuration	`number`	`500`	Duration of CSS transition. (in milliseconds) Determines how long enterActive, leaveActive classNames should last and also affects the duration of sliding animation in accordion mode.

classNames

Key	Default	Description
tabGroup	`'skltbs-tab-group'`	`ul` element wrapping all tabItems.
tabItem	`'skltbs-tab-item'`	Child `li` elements of the tabGroup.
tab	`'skltbs-tab'`	Child `button` elements of each tabItem.
panelGroup	`'skltbs-panel-group'`	Element wrapping panels. (Doesn't have to be the direct parent element of the panels.)
panel	`'skltbs-panel'`	panel elements in the panelGroup element tree.
panelHeading	`'skltbs-panel-heading'`	Dynamically created element in accordion mode that wraps the tabs.
init	`'skltbs-init'`	Class added to container when a Skeletabs instance is done initializing.
tabsMode	`'skltbs-mode-tabs'`	Class added to container in tabs mode.
accordionMode	`'skltbs-mode-accordion'`	Class added to container in accordion mode.
active	`'skltbs-active'`	Class added to the active tabItem, tab and panel.
disabled	`'skltbs-disabled'`	Class added to disabled tabItem(s), tab(s) and panel(s).
enter	`'skltbs-enter'`	Class added to the panel getting in. Declare your CSS transition's starting state.
enterActive	`'skltbs-enter-active'`	Class added to the panel getting in, on the next rendering frame. Declare your CSS transition's ending state.
enterDone	`'skltbs-enter-done'`	Class added to the panel completely got in.
leave	`'skltbs-leave'`	Class added to the panel getting out. Declare your CSS transition's starting state.
leaveActive	`'skltbs-leave-active'`	Class added to the panel getting out, on the next rendering frame. Declare your CSS transition's ending state.
leaveDone	`'skltbs-leave-done'`	Class added to the panel completely got out.

Configuring global defaults

You can change the default options that apply to all Skeletabs instances like next:

$.skeletabs.setDefaults({
  autoplay: true,
  pauseOnHover: true
});

Similarly, default CSS classes can be globally configured. Pass a string input to change the 'skltbs' prefix to your own settings, and an object to configure each className one by one.

$.skeletabs.setClassNames('my');

$.skeletabs.setClassNames({
  tabGroup: 'nav',
  tabItem: 'nav-item',
  tab: 'nav-link',
  panelGroup: 'panel-container',
  panel: 'panel',
  panelHeading: 'panel-heading'
});

Global settings should be declared before calling .skeletabs();. If declared in between instantiations, your globals will only affect instances created afterwards.

Methods

Skeletabs dispose some very useful methods.

$(selector).skeletabs('method', [, arguments...]);

You should initialize the plugin once to be able to use them. Please see next example:

// Enable Skeletabs with autoplay feature
$('#container').skeletabs({ autoplay: true });
// Pause autoplaying on clicking stop button
$('#stopButton').click(function() {
  $('#container').skeletabs('pause');
});

destroy

Reset all modifications made by Skeletabs, unbind event listeners and remove references to the instance itself.

$('#container').skeletabs('destroy');

reload

Recalculate the size of elements, and update the layout or size of panels if required. This method is useful when you want to control updates manually on pages in complex structure.

goTo

@param query number | string — index or hash of the destination panel

// Go to 3rd panel
$('#container').skeletabs('goTo', 2);
// Go to the panel that matches URL hash (if exists)
$('#container').skeletabs('goTo', window.location.hash);

Move to the panel matching passed query. Do nothing if that index is disabled by disabledIndex option.

number: Target panel's index can be used. Using negative index will select from the end. (-1 is the last index)
string: You can also pass a hash matching the panel's id. This is useful when you want to sync your tabs with hash changes.

Move to the next panel. If the very next index is disabled, move to the closest available index instead. Do nothing if no available panel is found in that direction.

Move to the previous panel. If the very previous index is disabled, move to the closest available index instead. Do nothing if no available panel is found in that direction.

add

@param data object
- tab string — new tab's content HTML
- panel string — new panel's content HTML

Add a new set of tab and panel.

$('#container').skeletabs('add', {
  tab: 'New tab',
  panel: '<p>Added a <strong>new tab</strong>.</p>'
});

remove

@param index number — index of the tab/panel to remove

Remove tab/panel of the passed index. Negative index can select from the end.

$('#container').skeletabs('remove', -1);

play

Automatically move forward to the next panel. (Time delay before next autoplay tick can be configured using autoplayInterval option.)

pause

Pause autoplaying to the next panel.

getCurrentInfo

@returns info object
- $container jQuery.Element — container element
- $currentPanel jQuery.Element — currently active panel element
- $currentTab jQuery.Element — currently active tab element
- $panels jQuery.Element — panel elements
- $tabs jQuery.Element — tab elements
- currentIndex number — currently active index
- currentLayout string — currently used layout ('tabs' or 'accordion')
- size number — length of panels

Get main info from a Skeletabs instance.

// Enable Skeletabs
$('#container').skeletabs();
// Log current index
var info = $('#container').skeletabs('getCurrentInfo');
console.log(info.currentIndex); // 0

Events

You can bind custom callbacks using jQuery events that the plugin dispatches. All events are prefixed by skeletabs:, and triggered onto the container element.

$('#container')
  .on('skeletabs:init', function(event, info) {
    // After done initializing...
  })
  .on('skeletabs:layoutchange', function(event, info) {
    // When switching between tabs <-> accordion...
  })
  .skeletabs(); // init

All callbacks receive next arguments by default.

@param event jQuery.Event — jQuery Event object
@param info object
- $container jQuery.Element — container element
- $currentPanel jQuery.Element — currently active panel element
- $currentTab jQuery.Element — currently active tab element
- $panels jQuery.Element — panel elements
- $tabs jQuery.Element — tab elements
- currentIndex number — currently active index
- currentLayout string — currently used layout ('tabs' or 'accordion')
- size number — length of panels

Events that passes additional parameters are indicated so.

skeletabs:init

Event fired on initialization completeion. If this event is not triggered, make sure you added your event listener before calling .skeletabs();.

skeletabs:move

@param event jQuery.Event — jQuery Event object
@param info object
- $container jQuery.Element — container element
- $currentPanel jQuery.Element — currently active panel element
- $currentTab jQuery.Element — currently active tab element
- $nextPanel jQuery.Element — panel element we are moving onto
- $nextTab jQuery.Element — tab element we are moving onto
- $panels jQuery.Element — panel elements
- $tabs jQuery.Element — tab elements
- currentIndex number — currently active index
- nextIndex number — index of the tab we are moving onto
- currentLayout string — currently used layout ('tabs' or 'accordion')
- size number — length of panels

Event fired before moving to another tab. It does not trigger when goTo() method does not actually move due to no available index found.

skeletabs:moved

@param event jQuery.Event — jQuery Event object
@param info object
- $container jQuery.Element — container element
- $currentPanel jQuery.Element — currently active panel element
- $currentTab jQuery.Element — currently active tab element
- $previousPanel jQuery.Element — panel element we have moved from
- $previousTab jQuery.Element — tab element we have moved from
- $panels jQuery.Element — panel elements
- $tabs jQuery.Element — tab elements
- currentIndex number — currently active index
- previousIndex number — index of the tab we have moved from
- currentLayout string — currently used layout ('tabs' or 'accordion')
- size number — length of panels

Event fired after moving to another tab. It does not trigger when goTo() method does not actually move due to no available index found.

skeletabs:layoutchange

Event fired when we are switching between tabs and accordion layout. Instances that do not use alternative layout like .skeletabs({ accordion: false }); does not trigger this event.

Themes

skeletabs.css file has 2 default themes included. Adding a className starting with skltbs-theme- to the container element will apply relevant theme.

<div class="skltbs-theme-light"></div>

When you have a nested Skeletabs container inside another, the theme declaration in CSS will cascade down from the outmost container. In other words, in a nested structure, only the outer container needs to have the CSS class.

skltbs-theme-light

skltbs-theme-dark

Transition effects

skeletabs.css file has 4 different types of default animation bundled in. Adding a className starting use- to the container element will apply the relevant effect.

<div class="skltbs use-fade"></div>

fade

fade-scale

drop

rotate

Make my own effect

Below is the CSS implemetation of built-in fade effect. It may come in handy when you create your own effects.

/* panel group */
.skltbs-mode-tabs.use-fade .skltbs-panel-group {
  position: relative;
}
/* all panels */
.skltbs-mode-tabs.use-fade .skltbs-panel {
  transition: opacity 500ms;
}
/* hiding panel's initial state */
.skltbs-mode-tabs.use-fade .skltbs-leave {
  position: absolute;
  top: 0;
  /* override `display: none;` added by JS */
  display: block !important;
  opacity: 1;
}
/* hiding panel's target state */
.skltbs-mode-tabs.use-fade .skltbs-leave-active {
  opacity: 0;
}
/* showing panel's initial state */
.skltbs-mode-tabs.use-fade .skltbs-enter {
  position: relative;
  opacity: 0;
}
/* showing panel's target state */
.skltbs-mode-tabs.use-fade .skltab-active {
  opacity: 1;
}

Default time duration of the transitions is 500ms. Please remember passing the option .skeletabs({ transtionDuration: 800 }); when you change this value in CSS.

FAQ

Was this helpful to you? If you're experiencing a different issue, feel free to open a thread on GitHub issues.

Skeletabs dispose add and remove methods to allow adding new panels or removing exinting ones.

// Append a new panel
$('#container').skeletabs('add', {
  tab: 'New panel',
  panel: '<p>Added a <strong>new panel</strong>.</p>'
});

// Remove the last panel
$('#container').skeletabs('remove', -1);

You can move to matching panel by passing a hash string to goTo method. Below is an example implementation that this site is using.

$(document).on('click', 'a[href^="#"]', function (event) {
  var hash = $(anchor).attr('href');
  if (history && history.pushState) {
    history.pushState({ hash: hash }, null, hash);
  } else {
    location.hash = hash;
  }
  $('#page').skeletabs('goTo', hash);
  event.preventDefault();
});

Did you create a nested Skeletabs instance inside another? If so, inner instance will bubble up all events to the parent instance(s). In this case, I recommend calling event.stopPropagation(); in the callback function from the inner instance to stop the bubbling.

$('#inner').on('skeletabs:moved', function(event) {
  // Stop event bubbling from inner Skeletabs
  event.stopPropagation();
});
$('#outer').on('skeletabs:moved', function(event) {
  // When outer Skeletabs finishes a movement...
});