JSFiddle - React, Tailwind, and code Playground

by oakley808

JavaScript

/*
 *  Project: theSOURCE Tabs
 *  Description: Simple light-weight jQuery tabs
 *  Author: Michael Oakley
 *  License: None
 */


;(function ( $, window, document, undefined ) {


    // Create the defaults once
    var pluginName = "tabs";

    var defaults = {
        header: 'li',
        containers: 'div'
    };

    // The actual plugin constructor
    function Tabs( element, options ) {
        this.element = element;
        this._name   = pluginName;

        this.header     = $(element).children('ul');
        this.containers = $(element).children('div');

        this.init();
    }

    Tabs.prototype = {

        init: function ($ul,$divs) {
        // You have access to the DOM element and options via: this.element and this.options
        // call functions like: this.yourOtherFunction(this.element, this.options).
            var self = this;
            $ul = this.$ul;
            $divs = this.$divs;


            //initial display
            $ul.children('li').first().addClass('active');
            $divs.hide().first().show();

            //handle clicks
            $ul.children('li').on('click',function(){
                var $header = $(this);
                var targetId = $header.children('a').attr('href');

                if( ! $header.hasClass('active') ) {
                    return self.activate($header,targetId);
                }
            });
        },

        activate: function($header,targetId) {

            $header.addClass('active');
            $(targetId).show();
            console.log(this.$ul);

        }
    };

    // A really lightweight plugin wrapper around the constructor,
    // preventing against multiple instantiations
    $.fn[pluginName] = function ( options ) {
        return this.each(function () {
            if (!$.data(this, "plugin_" + pluginName)) {
                $.data(this, "plugin_" + pluginName, new Tabs( this, options ));
            }
        });
    };

})( jQuery, window, document );


layout