jQuery Tabs

by Florian Bar

HTML

<ul class="tabs" data-tabs data-tabs-options="scrollToContent: false">
    <li class="tabs-title is-active"><a href="#panel1-1">Tab 1</a>
    </li>
    <li class="tabs-title"><a href="#panel1-2">Tab 2</a>
    </li>
    <li class="tabs-title"><a href="#panel1-3">Tab 3</a>
    </li>
</ul>
<div class="tabs-content">
    <div class="tabs-panel is-active" id="panel1-1">
         <h4>Panel 1</h4>

        <p>Panel 1 content goes here...</p>
    </div>
    <div class="tabs-panel" id="panel1-2">
         <h4>Panel 2</h4>

        <p>Panel 2 content goes here...</p>
    </div>
    <div class="tabs-panel" id="panel1-3">
         <h4>Panel 3</h4>

        <p>Panel 3 content goes here...</p>
    </div>
</div>
<br>
<a id="goToPanel1" href="javascript:void(0)">Go to panel 1</a>
<br>
<a id="goToPanel2" href="javascript:void(0)">Go to panel 2</a>
<br>
<a id="goToPanel3" href="javascript:void(0)">Go to id '#panel1-3'</a>

CSS

body {
    font-family: sans-serif;
    font-size: 100%;
}
.tabs {
    padding: 0;
    list-style-type: none;
}
.tabs-title {
    display: inline-block;
    margin: 0 0 0 8px;
}
.tabs-title:first-child {
    margin-left: 0;
}
.tabs-title a {
    display: block;
    padding: 5px 2px;
    text-decoration: none;
    border-bottom: 2px solid #eee;
    color: #666;
}
.tabs-title.is-active a {
    border-bottom-color: blue;
}
.tabs-panel {
    display: none;
    background: #eee;
    padding: 5px 10px;
}
.tabs-panel.is-active {
    display: block;
}

JavaScript

;(function ($, window, undefined) {

    var pluginName = "tabs";

    // Constructor
    $[pluginName] = function (element, options) {
        var self = this;
        var $element = $(element);
        this.options = $.extend({}, $[pluginName].defaults, options);

        $element.on('click.' + [pluginName], '.tabs-title a', function () {
            var $li = $(this).closest('li');
            var index = $li.index();

            if (!$li.hasClass('is-active')) {
                self.toggleByIndex(index);
            }
        });

        self.toggleById = function (id) {
            var $panel = $(id);

            if (!$panel.hasClass('is-active')) {
                hideActivePanel();

                // Show new panel
                var index = $panel.index();
                $panel.addClass('is-active');
                $('.tabs-title', $element).eq(index).addClass('is-active');

                handleToggle(index);
            }
        };

        self.toggleByIndex = function (index) {
            var $title = $('.tabs-title', $element).eq(index);

            if (!$title.hasClass('is-active')) {
                hideActivePanel();

                // Show new panel
                var $titleLink = $('a', $title);
                var panelId = $('a', $title).attr('href');
                $title.addClass('is-active');
                $(panelId).addClass('is-active');

                handleToggle(index);
            }
        };

        function hideActivePanel() {
            // Hide active panel
            var $activeTitle = $('.tabs-title.is-active', $element);
            var activePanelId = $('a', $activeTitle).attr('href');
            $activeTitle.removeClass('is-active');
            $(activePanelId).removeClass('is-active');
        }

        function handleToggle(index) {
            // Scroll to panel content
            //if (options.scrollToContent) {
            //    $('html, body').animate({scrollTop: $(panelId).position().top},...