Tabsets

Example of multiple tab sets

by Yigang Fang

HTML

<div class="tabset">
    <ul class="tabs">
        <li class="tab"><a href="#panel1">Tab 1</a></li>
        <li class="tab"><a href="#panel2">Tab 2</a></li>
        <li class="tab"><a href="#panel3">Tab 3</a></li>
    </ul>
    <div class="panel" id="panel1">Panel 1</div>
    <div class="panel" id="panel2">Panel 2</div>
    <div class="panel" id="panel3">Panel 3</div>
</div>
<br />
<div class="tabset">
    <ul class="tabs">
        <li class="tab"><a href="#panel4">Tab 1</a></li>
        <li class="tab"><a href="#panel5">Tab 2</a></li>
        <li class="tab"><a href="#panel6">Tab 3</a></li>
    </ul>
    <div class="panel" id="panel4">Panel 1</div>
    <div class="panel" id="panel5">Panel 2</div>
    <div class="panel" id="panel6">Panel 3</div>
</div>
<br />
<div class="tabset">
    <ul class="tabs">
        <li class="tab"><a href="#panel7">Tab 1</a></li>
        <li class="tab"><a href="#panel8">Tab 2</a></li>
        <li class="tab"><a href="#panel9">Tab 3</a></li>
    </ul>
    <div class="panel" id="panel7">Panel 1</div>
    <div class="panel" id="panel8">Panel 2</div>
    <div class="panel" id="panel9">Panel 3</div>
</div>

CSS

.tabs {
    list-style-type: none;
    margin: 0 0 -1px 0;
    padding: 0;
    position: relative;
    top: 1px;
}
.tab {
    float: left;
}
.tab a {
    -moz-border-radius-topleft: 8px;
    -moz-border-radius-topright: 8px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border: 1px solid #000;
    display: block;
    margin-left: 13px;
    padding: 8px 13px;
}
.tab a.selected {
    border-bottom-color: #fff;
}
.panel {
    -moz-border-radius-topleft: 8px;
    -moz-border-radius-topright: 8px;
    -moz-border-radius-bottomleft: 8px;
    -moz-border-radius-bottomright: 8px;
    border-radius: 8px;
    border: 1px solid #000;        
    clear: both;
    overflow: hidden;
    padding: 10px 10px;
    width: 300px;
}

JavaScript

(function ($) {
    $.fn.tabset = function () {
        var $tabsets = $(this);
        $tabsets.each(function (i) {
            var $tabs = $('li.tab a', this);
            $tabs.click(function (e) {
                var $this = $(this);
                    panels = $.map($tabs, function (val, i) {
                        return $(val).attr('href');
                    });
                $(panels.join(',')).hide();
                $tabs.removeClass('selected');
                $this.addClass('selected').blur();
                $($this.attr('href')).show();
                e.preventDefault();
                return false;
            }).first().triggerHandler('click');
        });
    };
})(jQuery);
    

$(function() {
    $('div.tabset').tabset();
});