Ultra Simple JQuery Tabs / Drawers

sjb-tabs.js

/*!
 * SJB Tabs v 0.1
 * 14/05/2015
 * @author: Steven Brown
 */
(function( $ )
{

    $.fn.sjbtabs = function()
    {

        // extend the options from pre-defined values:
       var options = $.extend(
       {
           onShow: function() {}
       }, arguments[0] || {});

        this.click(function(e)
        {

            if (!$(this).hasClass('active'))
            {

                //Get target tab
                var target = $(this).data('tab')

                //Get clicked tab class
                var tabClass = $(this).attr('class')

                //Remove classes
                $('.'+tabClass).removeClass('active')

                //Add active class to the tab link / accordion
                $('*[data-tab = '+target+']').addClass('active')

                //Display content
                $('.tab-content').removeClass('active')
                $('.tab-group .'+target).addClass('active')

                // Call on the onShow callback function & apply scope
                options.onShow.call(this);

            } else
            {
                //If its an accordion drawer, close others
                if ($(this).hasClass('tab-accordion'))
                {
                    $(this).removeClass('active')
                    $('.tab-content').removeClass('active')
                }
            }

            e.preventDefault()

        })

        return this;

    };

}( jQuery ));


/**Layout for tabs

<div class="tabs">

    <div class="tab-row">
        <a href="#" class="tab" data-tab="tab-1">Tab 1</a>
    </div>
    <div class="tab-group">
        <!--You can also add a drawer for mobile by adding-->
        <div class="tab tab-accordion" data-tab="tab-1">Tab 1</div>
        <div class="tab-1">
            <p>Content</p>
        </div>
    </div>

</div>

Can be called like so:
$('.tab').sjbtabs(
{
    onShow: function()
    {
        //do something
    }
});

**/