Responsive Tabs

HTML

<ol>
    <li class="important"><a href="#panel-1">Important</a></li>
    <li><a href="google.com">Two</a></li>
    <li><a href="#panel-3">Three</a></li>
    <li><a href="#panel-4">Four</a></li>
</ol>
<ul>
    <!-- IDs are set just as a non-JS backup -->
    <li id="panel-1" class="important"><p>All kinds of important information.</p></li>
    <li id="panel-2"><p>Panel two.</p></li>
    <li id="panel-3"><p>Panel three.</p></li>
    <li id="panel-4"><p>Panel four.</p></li>
</ul>

CSS

body {
    min-width: 300px;
}

/* ----- Tabs ----- */

ol {
    background: #333;
    list-style: none;
    height: 40px;
}
ol li {
    float: left;
    padding: 5px 0;
}
ol li a {
    background: #555;
    color: #aaa;
    display: block;
    float: left;
    font: bold 14px/30px Tahoma, Arial, sans-serif;
    margin: 0 0 0 5px;
    padding: 0 10px;
    text-decoration: none;
}
ol li.active a {
    background: #222;
    color: #fff;
}

/* ----- Panels ----- */

ul {
    position: relative;
    list-style: none;
}
ul li {
    background: #ccc;
    border-bottom: 1px solid #bbb;
    height: 200px;
    width: 100%;
}
ul li.active {
    z-index: 1;
}
ul li p {
    font: normal 14px/18px Tahoma, Arial, sans-serif;
    padding: 5px;
}
      
/* ----- Responsive-ness ----- */
      
@media screen and (min-width: 500px) {
    .js ol li.important {
        -moz-box-shadow: inset -1px 0 #000;
        -webkit-box-shadow: inset -1px 0 #000;
        box-shadow: inset -1px 0 #000;
        width: 50%;
    }
    .js ol li.important a,
    .js ol li.secondary-active a {
        background: #222;
        color: #fff;
    }
    .js ul li {
        left: 50%;
        width: 50%;
    }
    .js ul li.important {
        background: #e0e0e0;
        -moz-box-shadow: inset -1px 0 #bbb;
        -webkit-box-shadow: inset -1px 0 #bbb;
        box-shadow: inset -1px 0 #bbb;
        left: 0;
    }
    .js ul li.secondary-active {
        z-index: 1;
    }
}

JavaScript

$(function() {
    var $tabs = $('ol li');
    var $panels = $('ul li');
        
    // If there's no JS, the panels will simply stack down the page
    $panels.css('position','absolute');
    
    // Having JS allows the responsive CSS to take
    $('body').addClass('js');
        
    // Makes the first tab and panel active by default
    // The second tab and panel are active by default on the expanded version
    $tabs.first().addClass('active').next().addClass('secondary-active');
    $panels.first().addClass('active').next().addClass('secondary-active');
        
    $tabs.bind('click', function(e) {
        e.preventDefault();
        $this = $(this);
        var tabIndex = $tabs.index($this);
          
        // Move the active class around to the appropriate tabs and panels
        $this.addClass('active').siblings().removeClass('active');
        $panels.eq(tabIndex).addClass('active').siblings().removeClass('active');
          
        // Only move the secondary active class if the first item isn't clicked
        if(tabIndex !== 0) {
            $this.addClass('secondary-active').siblings().removeClass('secondary-active');
            $panels.eq(tabIndex).addClass('secondary-active').siblings().removeClass('secondary-active');
        }
    });
});