Barebones Tabs switcher

tabs.js

/*jslint browser: true*/
/*global jQuery */

/*---------------------------------------------------------------
 * Barebones Tabs Class
 * 
 * Requires jQuery
 * 
 * Markup: 
 *  - Tab elements should have class "tab" with a data-tabref="x"
 *  where x points to a corresponding data-tab element on the tab content
 *  - Tab content should have tab-content class with data-tab="x", where
 *  x matches whatever was specified above.
 *  
 * Usage: 
 * var tabs = Object.create(Tabs);
 * tabs.init("product-collateral");
 * tabs.bindHandlers();
 *--------------------------------------------------------------*/


var Tabs = {

    tabs: null,

    tabsContents: null,

    tabsContainer: null,

    init: function (tabsContainer) {
        "use strict";
        var container;

        /**
         * Get Tabs Container
         * @type {NodeList}
         */
        container = document.getElementsByClassName(tabsContainer);

        /**
         * Set up TabsContainer so log as it has length (get first element)
         */
        if (container.length) {
            this.tabsContainer = container[0];
        }

        /**
         * Set up Tabs & Tabs Content & Switch to First Tab.
         */
        if (this.tabsContainer !== null) {
            this.tabs = this.tabsContainer.getElementsByClassName("tab");
            this.tabsContents = this.tabsContainer.getElementsByClassName("tab-content");
            if (this.tabs.length) {
                this.switchTabs(this.tabs[0]);
            }
        }

    },

    /**
     * Bind handlers (click events) to tabs.
     */
    bindHandlers: function () {
        "use strict";
        var self = this;

        jQuery(this.tabs).bind("click", function () {
            var element = this,
                showTab;
            showTab = element.getAttribute("data-tabref");
            if (!jQuery(element).hasClass("active") && showTab !== null) {
                self.switchTabs(element);
            }
        });
    },

    /**
     * Switch Tab Action
     * @param tab Tab to which we should switch
     */
    switchTabs: function (tab) {
        "use strict";

        var i, showTab;

        /**
         * Get Reference
         * @type {Object|string|*}
         */
        showTab = tab.getAttribute("data-tabref");

        /**
         * Remove Active Class from Other Tabs
         */
        jQuery(this.tabs).removeClass("active");
        jQuery(tab).addClass("active");

        /**
         * Loop through tabs; hide inactive ones, show active ones.
         */
        for (i = 0; i < this.tabsContents.length; i = i + 1) {
            if (this.tabsContents[i].getAttribute("data-tab") === showTab) {
                jQuery(this.tabsContents[i]).show();
            } else {
                jQuery(this.tabsContents[i]).hide();
            }
        }

    }
};