jQuery Responsive Page Tabs

by Ryan Brackett & Jeremy Clements This plugin is ultra-simple. No frills, just fast, clean code to help you create a tab/panel interface on the web. Use your own styles. Responsive at a breakpoint you specify. Minimal HTML, CSS & JS gets it done. [email protected]

HTML

<h1>jQuery Responsive Page Tabs</h1>
This plugin allows for ultra-simple HTML. Just fast, clean code to help you create a tab/panel interface on the web. Use your own styles. Responsive at a breakpoint you specify. Minimal HTML, CSS & JS. Bonus: Widths for tabs are calculated with JS depending on the number of tabs. AND clicking a tab will automatically scroll that area into focus.
<br/>
<br/>For questions, contact <a href="mailto:[email protected]">[email protected]</a>

<br/>
<br/>
<br/>
<br/>
<div id="page-tabs">
    <ul id="tabs">
        <li>Tab 1</li>
        <li>Tab 2</li>
        <li>Tab 3</li>
        <li>Tab 4</li>
    </ul>
    <ul id="panels">
        <li>Panel 1</li>
        <li>Panel 2</li>
        <li>Panel 3</li>
        <li>Panel 4</li>
    </ul>
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>

CSS

body {
       font-family: Arial;
       padding: 20px;
       font-size: 13px;
   }
   #page-tabs {
       margin-top: 20px;
       overflow: hidden;
       -webkit-border-radius: 3px;
       border-radius: 3px;
   }
   #page-tabs, #page-tabs > ul {
       margin: 0;
       padding: 0;
   }
   #page-tabs #tabs {
       clear: both;
       overflow: auto;
       width: 100%;
   }
   #page-tabs #tabs > li {
       float: left;
       list-style: none;
       display: block;
       cursor: pointer;
       background-color: gray;
   }
   #page-tabs #tabs > li .tab-wrapper {
       padding: 20px 0px;
       font-size: 16px;
       font-weight: bold;
       text-align: center;
       color: white;
       border-right: 1px solid #dedede;
   }
   #page-tabs #tabs > li.last .tab-wrapper {
       border-right: none;
   }
   #page-tabs #tabs > li.xactive {
       background-color: #EDEDED;
   }
   #page-tabs #tabs > li.xactive .tab-wrapper {
       color: #aa5c09;
   }
   #page-tabs #tabs > li.first {
   }
   #page-tabs #tabs > li.last {
   }
   #page-tabs #panels {
       clear: both;
       position: relative;
       list-style: none;
   }
   #page-tabs #panels > li {
       margin: 0px;
       padding: 0px;
       height: 0px;
       width: 100%;
       list-style: none;
   }
   #page-tabs #panels > li ul {
       margin: 10px 20px;
   }
   #page-tabs #panels > li ul li {
       list-style: disc;
   }
   #page-tabs #panels .panel-wrapper {
       display: none;
       width: auto;
       padding: 30px;
       background-color: #EDEDED;
       position: relative;
   }
   #page-tabs #panels > li.xactive {
       height: auto;
   }
   #page-tabs #panels > li.xactive .panel-wrapper {
       display: block;
   }
   #page-tabs #panels .accordion-tab {
       display: none;
       padding: 25px 30px;
       background-color: #808080;
       color: #FFF;
       font-weight: bold;
       cursor: pointer;
       font-size: 20px;
   }
   #page-tabs #panels .xactive .accordion-tab...

JavaScript

// jQuery Responsive Page Tabs 1.0

var selectedTab = 0,
    scrollDelay = 20,
    scrollSpeed = 400,
    scrolltopOffset = 35;

$("#tabs").children().each(function (i) {
    i = i + 1;
    $(this).attr('id', "tab-" + i).addClass("tab").wrapInner(
        "<div class='tab-wrapper'></div>");
});
var count = $("#tabs").children().length;
var tab_width = (100 / count) + "%";
$("#tabs li").css("width", tab_width).eq(0).addClass('first').end().eq(-1).addClass(
    'last').end();
$("#panels").children().each(function (i) {
    i = i + 1;
    $(this).attr('id', "panel-" + i).addClass("panel").wrapInner(
        "<div class='panel-wrapper'></div>").prepend(
        "<div class='accordion-tab'></div>");
});
$(".accordion-tab").each(function (i) {
    i = i + 1;
    var tab_name = $("#tab-" + i).html();
    $(this).html(tab_name);
});
$("#tabs").children().eq(selectedTab).addClass("xactive");
$("#panels").children().eq(selectedTab).addClass("xactive");
$("#tabs > li").click(function () {
    $("#tabs > li, #panels > li").removeClass("xactive");
    $("#panels > li").eq($(this).index()).toggleClass("xactive");
    $(this).toggleClass("xactive");
});
$(".accordion-tab").click(function () {
    $("#tabs > li, #panels > li").removeClass("xactive");
    $("#tabs > li").eq($(this).parent().index()).toggleClass("xactive");
    $(this).parent().toggleClass("xactive");
});
$(".tab, .accordion-tab").click(function () {
    $('html,body').delay(scrollDelay).animate({
        scrollTop: $(this).offset().top - scrolltopOffset
    }, scrollSpeed);
});
$('body,html').bind('scroll mousedown wheel DOMMouseScroll mousewheel keyup',

function (e) {
    if (e.which > 0 || e.type == "mousedown" || e.type == "mousewheel") {
        $("html,body").stop();
    }
})