Introducing Skeletabs

Skeletabs, of which the name deriving from a combination of words "skeleton" and "tabs", is a jQuery plugin that gives your contents a tabbed browsing ability including accessibility and responsivity support, along with a high customizability.

With Skeletabs, you can:
  • Of course, navigate across tabbed contents.
  • Choose the default active tab.
  • Disable one or multiple tabs.
  • Equalize all panels height.
  • Customize every DOM element's class name.
  • Swap to accordion layout at a custom breakpoint.
  • Choose whether to navigate by clicking or by hovering.
  • Enable keyboard navigation for keyboard users.
  • Update the window URL hash.
  • Make it autorotate like a carousel.
  • Animate panels while switching(customizable).
  • Bind your own function to `tabswitch` event.

Can I use this for free?

Sure you do. This plugin is released under MIT license granting you full access to use it, edit it, distrubte it and so on, as long as you include the copyright notice to your copy.

Are there any dependencies for this plugin?

So far nothing else than the jQuery library. Skeletabs is being tested with the latest versions of jQuery 1.x through 3.x — you only have to have one of them installed. That's it.

How far can I go with IE?

Bundled CSS and JS will work in IE8.

I have an issue, how to report it?

Issues on GitHub repos is the official channel for bug report and/or suggestion. If you are not interested in signing up to GitHub but wish to notify me something, please do so by writing to .

How to install it?

  1. Download the package:
    Get Skeletabs
  2. Ready-to-use sources are located in /dist folder.
  3. Insert CSS and JS into your HTML. 
    <!DOCTYPE html>
<html>
    <head>

        <link rel="stylesheet" type="text/css" href="PATH/TO/STYLESHEET/skeletabs.min.css" />
    </head>
    <body>

        <script type="text/javascript" src="PATH/TO/SCRIPT/skeletabs.min.js"></script>
    </body>
</html>

Caution: If you have to support IE8, please use uncompressed version(skeletabs.css & skeletabs.js). (Minification breaks in IE8)

Example usage

HTML Syntax

<div id="skltbsDefault" class="skltbs">
    <ul role="tablist" class="skltbs-tab-group">
        <li role="presentation" class="skltbs-tab-item">
            <a role="tab" class="skltbs-tab" href="#{1st panel's id}">Tab 1</a>
        </li>
        <li role="presentation" class="skltbs-tab-item">
            <a role="tab" class="skltbs-tab" href="#{2nd panel's id}">Tab 2</a>
        </li>
        <li role="presentation" class="skltbs-tab-item">
            <a role="tab" class="skltbs-tab" href="#{3rd panel's id}">Tab 3</a>
        </li>
        <li role="presentation" class="skltbs-tab-item">
            <a role="tab" class="skltbs-tab" href="#{4th panel's id}">Tab 4</a>
        </li>
    </ul>
    <div class="skltbs-panel-group">
        <div role="tabpanel" id="{1st panel's id}" class="skltbs-panel">{1st panel}</div>
        <div role="tabpanel" id="{2nd panel's id}" class="skltbs-panel">{2nd panel}</div>
        <div role="tabpanel" id="{3rd panel's id}" class="skltbs-panel">{3rd panel}</div>
        <div role="tabpanel" id="{4th panel's id}" class="skltbs-panel">{4th panel}</div>
    </div>
</div>
  • Requirements for the markup are the panel's id. You need to give an (unique) id to every panel, and make your tab point to the matching panel.
  • You are encouraged to assign an id to each of the tabs also. Otherwise, Skeletabs will generate it based on the corresponding panel's id.
  • Class names starting with skltbs- are default names. You can specify your own class names using classes options.

Default

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro minima molestiae maiores reprehenderit dolorem placeat, distinctio non labore debitis beatae. Necessitatibus, esse fugit accusantium veniam dolor sint quod labore magni.

Accusamus odio assumenda error asperiores libero ad nobis, ipsum ea. Sapiente aperiam perspiciatis ea et quasi quaerat, similique, cum suscipit. Id alias quis error quam ipsam dolorum magni, modi blanditiis?

Ipsam enim facere, veniam vel dicta eligendi repellendus, tenetur deserunt suscipit recusandae ea harum, tempore. Laudantium eligendi debitis aut, modi, deserunt repellat expedita, ea eaque dolor aliquam labore non sequi.

Modi accusamus ea, voluptatibus autem repudiandae quia, recusandae porro. Suscipit aperiam adipisci aliquid corporis delectus et quas assumenda illo repellendus voluptatum? Iure facere inventore nisi. Dignissimos architecto laborum quos ab.

$("#skltbsDefault").skeletabs();

Default tab change

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro minima molestiae maiores reprehenderit dolorem placeat, distinctio non labore debitis beatae. Necessitatibus, esse fugit accusantium veniam dolor sint quod labore magni.

Accusamus odio assumenda error asperiores libero ad nobis, ipsum ea. Sapiente aperiam perspiciatis ea et quasi quaerat, similique, cum suscipit. Id alias quis error quam ipsam dolorum magni, modi blanditiis?

Ipsam enim facere, veniam vel dicta eligendi repellendus, tenetur deserunt suscipit recusandae ea harum, tempore. Laudantium eligendi debitis aut, modi, deserunt repellat expedita, ea eaque dolor aliquam labore non sequi.

Modi accusamus ea, voluptatibus autem repudiandae quia, recusandae porro. Suscipit aperiam adipisci aliquid corporis delectus et quas assumenda illo repellendus voluptatum? Iure facere inventore nisi. Dignissimos architecto laborum quos ab.

$("#skltbsDefaultTabChange").skeletabs({ defaultTab: 2 });

Caution: the index should be 1-based not 0-based.

Disable tab(s)

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro minima molestiae maiores reprehenderit dolorem placeat, distinctio non labore debitis beatae. Necessitatibus, esse fugit accusantium veniam dolor sint quod labore magni.

Accusamus odio assumenda error asperiores libero ad nobis, ipsum ea. Sapiente aperiam perspiciatis ea et quasi quaerat, similique, cum suscipit. Id alias quis error quam ipsam dolorum magni, modi blanditiis?

Ipsam enim facere, veniam vel dicta eligendi repellendus, tenetur deserunt suscipit recusandae ea harum, tempore. Laudantium eligendi debitis aut, modi, deserunt repellat expedita, ea eaque dolor aliquam labore non sequi.

Modi accusamus ea, voluptatibus autem repudiandae quia, recusandae porro. Suscipit aperiam adipisci aliquid corporis delectus et quas assumenda illo repellendus voluptatum? Iure facere inventore nisi. Dignissimos architecto laborum quos ab.

$("#skltbsDisableTab").skeletabs({ disableTab: 4 });

You can disable multiple tabs by passing an array of numbers.

$("#skltbsDisableTab").skeletabs({ disableTab: [3, 4] });

Caution: the index should be 1-based not 0-based.

Equalize heights

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo similique aliquam consequuntur accusantium perspiciatis earum, odio, mollitia ducimus tempore, et inventore repellat ea soluta! Molestiae ipsam modi error numquam, placeat!

Iure explicabo quia assumenda eaque hic obcaecati, doloremque sunt ipsa est nulla eius veniam inventore, atque possimus molestiae id quis perferendis, vel quaerat unde eum reprehenderit quas nesciunt distinctio. Ipsum.

Repellendus neque debitis velit, natus quibusdam enim, maxime doloremque nihil, fuga, labore optio magnam illum atque aliquam. Nobis numquam, non deserunt, accusamus amet beatae consequuntur animi perspiciatis, placeat voluptate nemo?

Iste doloremque repudiandae facere. Nulla laborum rerum facilis unde temporibus asperiores fugiat distinctio velit dolorum reprehenderit harum libero officiis eaque ullam maiores, ipsam impedit aperiam ex fugit laboriosam numquam illo.

Iusto, fugit laudantium delectus aliquam beatae non dolor, facere nihil expedita provident autem deleniti quidem atque optio eius repudiandae, iure rerum temporibus doloremque at. Corrupti minima sunt sed vel. Nostrum!

Incidunt nam ex ipsa, repudiandae magnam eveniet atque ducimus quo? Nesciunt laboriosam asperiores quaerat placeat explicabo ullam, repellat minus deserunt. Eaque laborum consequatur, cupiditate explicabo natus alias veritatis suscipit minus.

Esse, necessitatibus, non beatae officia quam totam dicta vero ducimus accusamus, dolorum minima praesentium numquam, hic qui ex aliquam debitis iure? Ea voluptas, ipsum voluptatibus beatae blanditiis maiores veniam atque.

$("#skltbsEqualHeights").skeletabs({ equalHeights: true });

Responsive settings

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro minima molestiae maiores reprehenderit dolorem placeat, distinctio non labore debitis beatae. Necessitatibus, esse fugit accusantium veniam dolor sint quod labore magni.

Accusamus odio assumenda error asperiores libero ad nobis, ipsum ea. Sapiente aperiam perspiciatis ea et quasi quaerat, similique, cum suscipit. Id alias quis error quam ipsam dolorum magni, modi blanditiis?

Ipsam enim facere, veniam vel dicta eligendi repellendus, tenetur deserunt suscipit recusandae ea harum, tempore. Laudantium eligendi debitis aut, modi, deserunt repellat expedita, ea eaque dolor aliquam labore non sequi.

Modi accusamus ea, voluptatibus autem repudiandae quia, recusandae porro. Suscipit aperiam adipisci aliquid corporis delectus et quas assumenda illo repellendus voluptatum? Iure facere inventore nisi. Dignissimos architecto laborum quos ab.

$("#skltbsResponsive").skeletabs({
    responsive: {
    breakpoint: 800,
    headingTagName: "h4"
});

Responsive settings can be turned off too.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro minima molestiae maiores reprehenderit dolorem placeat, distinctio non labore debitis beatae. Necessitatibus, esse fugit accusantium veniam dolor sint quod labore magni.

Accusamus odio assumenda error asperiores libero ad nobis, ipsum ea. Sapiente aperiam perspiciatis ea et quasi quaerat, similique, cum suscipit. Id alias quis error quam ipsam dolorum magni, modi blanditiis?

Ipsam enim facere, veniam vel dicta eligendi repellendus, tenetur deserunt suscipit recusandae ea harum, tempore. Laudantium eligendi debitis aut, modi, deserunt repellat expedita, ea eaque dolor aliquam labore non sequi.

Modi accusamus ea, voluptatibus autem repudiandae quia, recusandae porro. Suscipit aperiam adipisci aliquid corporis delectus et quas assumenda illo repellendus voluptatum? Iure facere inventore nisi. Dignissimos architecto laborum quos ab.

$("#skltbsNonResponsive").skeletabs({ responsive: false });

Switch on hovering

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro minima molestiae maiores reprehenderit dolorem placeat, distinctio non labore debitis beatae. Necessitatibus, esse fugit accusantium veniam dolor sint quod labore magni.

Accusamus odio assumenda error asperiores libero ad nobis, ipsum ea. Sapiente aperiam perspiciatis ea et quasi quaerat, similique, cum suscipit. Id alias quis error quam ipsam dolorum magni, modi blanditiis?

Ipsam enim facere, veniam vel dicta eligendi repellendus, tenetur deserunt suscipit recusandae ea harum, tempore. Laudantium eligendi debitis aut, modi, deserunt repellat expedita, ea eaque dolor aliquam labore non sequi.

Modi accusamus ea, voluptatibus autem repudiandae quia, recusandae porro. Suscipit aperiam adipisci aliquid corporis delectus et quas assumenda illo repellendus voluptatum? Iure facere inventore nisi. Dignissimos architecto laborum quos ab.

$("#skltbsOnHover").skeletabs({ triggerEvent: "hover" });

Disable extra keyboard support

You can choose not to use navigation by arrow, home/end keys.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro minima molestiae maiores reprehenderit dolorem placeat, distinctio non labore debitis beatae. Necessitatibus, esse fugit accusantium veniam dolor sint quod labore magni.

Accusamus odio assumenda error asperiores libero ad nobis, ipsum ea. Sapiente aperiam perspiciatis ea et quasi quaerat, similique, cum suscipit. Id alias quis error quam ipsam dolorum magni, modi blanditiis?

Ipsam enim facere, veniam vel dicta eligendi repellendus, tenetur deserunt suscipit recusandae ea harum, tempore. Laudantium eligendi debitis aut, modi, deserunt repellat expedita, ea eaque dolor aliquam labore non sequi.

Modi accusamus ea, voluptatibus autem repudiandae quia, recusandae porro. Suscipit aperiam adipisci aliquid corporis delectus et quas assumenda illo repellendus voluptatum? Iure facere inventore nisi. Dignissimos architecto laborum quos ab.

$("#skltbsDisableExKeyboard").skeletabs({ extendedKeyboard: false });

Prevent URL update

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro minima molestiae maiores reprehenderit dolorem placeat, distinctio non labore debitis beatae. Necessitatibus, esse fugit accusantium veniam dolor sint quod labore magni.

Accusamus odio assumenda error asperiores libero ad nobis, ipsum ea. Sapiente aperiam perspiciatis ea et quasi quaerat, similique, cum suscipit. Id alias quis error quam ipsam dolorum magni, modi blanditiis?

Ipsam enim facere, veniam vel dicta eligendi repellendus, tenetur deserunt suscipit recusandae ea harum, tempore. Laudantium eligendi debitis aut, modi, deserunt repellat expedita, ea eaque dolor aliquam labore non sequi.

Modi accusamus ea, voluptatibus autem repudiandae quia, recusandae porro. Suscipit aperiam adipisci aliquid corporis delectus et quas assumenda illo repellendus voluptatum? Iure facere inventore nisi. Dignissimos architecto laborum quos ab.

$("#skltbsDisableHashUpdate").skeletabs({ updateUrl: false });

Use animation

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro minima molestiae maiores reprehenderit dolorem placeat, distinctio non labore debitis beatae. Necessitatibus, esse fugit accusantium veniam dolor sint quod labore magni.

Accusamus odio assumenda error asperiores libero ad nobis, ipsum ea. Sapiente aperiam perspiciatis ea et quasi quaerat, similique, cum suscipit. Id alias quis error quam ipsam dolorum magni, modi blanditiis?

Ipsam enim facere, veniam vel dicta eligendi repellendus, tenetur deserunt suscipit recusandae ea harum, tempore. Laudantium eligendi debitis aut, modi, deserunt repellat expedita, ea eaque dolor aliquam labore non sequi.

Modi accusamus ea, voluptatibus autem repudiandae quia, recusandae porro. Suscipit aperiam adipisci aliquid corporis delectus et quas assumenda illo repellendus voluptatum? Iure facere inventore nisi. Dignissimos architecto laborum quos ab.

$("#skltbsAnimated").skeletabs({ animation: "fade-scale" });

Read API documentation for more information about the animation type and customization.

Autoplay

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro minima molestiae maiores reprehenderit dolorem placeat, distinctio non labore debitis beatae. Necessitatibus, esse fugit accusantium veniam dolor sint quod labore magni.

Accusamus odio assumenda error asperiores libero ad nobis, ipsum ea. Sapiente aperiam perspiciatis ea et quasi quaerat, similique, cum suscipit. Id alias quis error quam ipsam dolorum magni, modi blanditiis?

Accusamus odio assumenda error asperiores libero ad nobis, ipsum ea. Sapiente aperiam perspiciatis ea et quasi quaerat, similique, cum suscipit. Id alias quis error quam ipsam dolorum magni, modi blanditiis?

Modi accusamus ea, voluptatibus autem repudiandae quia, recusandae porro. Suscipit aperiam adipisci aliquid corporis delectus et quas assumenda illo repellendus voluptatum? Iure facere inventore nisi. Dignissimos architecto laborum quos ab.

$("#skltbsAutoplay").skeletabs({
    autoplay: true,
    autoplayInterval: 4500
});

Value for autoplayInterval is in miliseconds.

Bind custom event

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro minima molestiae maiores reprehenderit dolorem placeat, distinctio non labore debitis beatae. Necessitatibus, esse fugit accusantium veniam dolor sint quod labore magni.

Accusamus odio assumenda error asperiores libero ad nobis, ipsum ea. Sapiente aperiam perspiciatis ea et quasi quaerat, similique, cum suscipit. Id alias quis error quam ipsam dolorum magni, modi blanditiis?

Ipsam enim facere, veniam vel dicta eligendi repellendus, tenetur deserunt suscipit recusandae ea harum, tempore. Laudantium eligendi debitis aut, modi, deserunt repellat expedita, ea eaque dolor aliquam labore non sequi.

Modi accusamus ea, voluptatibus autem repudiandae quia, recusandae porro. Suscipit aperiam adipisci aliquid corporis delectus et quas assumenda illo repellendus voluptatum? Iure facere inventore nisi. Dignissimos architecto laborum quos ab.

$("#skltbsCustomEvent").skeletabs().on("tabswitch", function() {
    alert("You are on: #" + $(this).skeletabs("getCurrentPanel").attr("id"));
});

API documentation

List of options

Name Type Default Description
animation String null

Add animation effect of given name to the tab switch action. "fade", "fade-scale", "drop", "rotate" values are available by default. This name will be added to the outmost container's class.

You can also apply a custom animation, as long as it is pre-defined in your CSS. Refer to skeletabs.animation.scss for example implementation.
autoplay Boolean false

Automatically navigate to the next tab. This will halt if user focuses a tab(if triggerEvents is set to "hover", hovering on a tab will also stop it.)
autoplayInterval Number 3000

Autoplay action's time gap. In miliseconds.
classes Object Read description

Class names for the DOM elements. The value is an Object including keys/values as follows:

{
    container: "skltbs",
    tabGroup: "skltbs-tab-group",
    tabItem: "skltbs-tab-item",
    tab: "skltbs-tab",
    panelGroup: "skltbs-panel-group",
    panel: "skltbs-panel",
    accordionHeading: "skltbs-panel-heading",
    isActive: "is-active",
    isDisabled: "is-disabled",
    isGettingIn: "is-getting-in",
    isGettingOut: "is-getting-out",
    hasAnimation: "has-animation"
}
defaultTab Number 1

1-based index value of the active tab by default.
disableTab Number
or
Array		 null

1-based index value of the tab(s) you wish to disable.
equalHeights Boolean false

Set all content panels height to the tallest one's.
extendedKeyboard Boolean true

Enable or disable additional keyboard navigation.

↑
if you are on a panel, move to the matching tab.
↓
if you are on a tab, move to the matching panel.
←
move to the next tab.
→
move to the previous tab.
Home
move to the first tab.
End
move to the last tab.
responsive Object or null Read description

Responsive settings. The value is an Object including keys/values as follows:

{
    breakpoint: 640,
    headingTagName: "h2"
}

Basically, Skeletabs will clone the tabs (with a wrapper element, using headingTagName) and place them hidden before each panel. This allows your tabs immediately change layout when the viewport width is smaller than the breakpoint value.
triggerEvent String "click"

Name of the event that triggers switching by. "click" and "hover" values can be used.
updateUrl Boolean true

Change hash in the browser URL as the user navigate. If user accesses the page with a hash (e.g. //your.sitename/#tab3) the matching tab & panel will automatically become the default active tab.

List of public methods

Skeletabs provides a serie of methods you can call by passing the name of the method as argument.

$("#myTabs").skeletabs("getCurrentTab"); // returns $("#myTabs .skltbs-panel.is-active");
Name Description
getCurrentTab

Get currently active tab element as jQuery object.
getCurrentPanel

Get currently active panel element as jQuery object.
startRotation

Manually trigger autoplaying.
stopRotation

Manually stop autoplaying.

Custom namespace

Skeletabs offers "tabswitch" namespace .

$("#myTabs").skeletabs("getCurrentTab"); // returns $("#myTabs .skltbs-panel.is-active");