Skip to content
This repository


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Fetching latest commit…


Cannot retrieve the latest commit at this time

Octocat-spinner-32 demo
Octocat-spinner-32 theme
Octocat-spinner-32 tabbox.css
Octocat-spinner-32 tabbox.js
Octocat-spinner-32 xtag.json


The Tabbox enables you to easily create several content panels and toggle between them via tabs.

<x-tabbox id="tabbox">
        <x-tab selected="true">Tab 1</x-tab>
        <x-tab>Tab 2</x-tab>
        <x-tab>Tab 3</x-tab>

        <x-tabpanel selected="true">
                Tabboxes are great for showing users only the content they need to see, while providing users an easy way to access additional content on-demand.

                Examples of use-cases for tabboxes include: a set of step-wise directions, grouping like content elements together, or as a building block for a tabbed viewing interface in a mobile web app.

                In short, tabboxes are pretty freaking cool, and when you pair them with CSS animations/transitions, you can do things with a few styles that used to take a ton of JavaScript and custom code.


    var tabbox = document.getElementById('x-tabbox');

    // create a new tab and panel
    var tab = document.createElement('x-tab');
    tab.innerHTML = 'Tab 4';

    var panel = document.createElement('x-tabpanel');
    panel.innerHTML = '<p>New content</p>';

    // If you want to select a certain tab via code, you can 
    // either use the `selected` attribute OR
    // the tabboxes methods

    tabbox.getSelectedTab(); // returns the <x-tab>Tab 3</x-tab> element

    tabbox.addEventListener('selected', function(e){
        // fired each time the tab is changed
        // equals the selected tab element

Something went wrong with that request. Please try again.