Jquery tabs

Simple and elegant jquery tab with content...

by abhishek bhandari

HTML

<div id="tabmenu" class="community-wrapper">
    <ul id="nav">
        <li><a href="#" class="active">Price Range</a>
        </li>
        <li><a href="#">Size</a>
        </li>
        <li><a href="#">Schools</a>
        </li>
        <li><a href="#">Gated Communities</a>
        </li>
        <li><a href="#">Features</a>
        </li>
    </ul>
    <div id="tab-content">
        <div id="tab1">
            <table border="0" cellpadding="0" cellspacing="0" width="100%">
                <td style="text-align: center; font-size:14; background-color: #fcfcfc;"><a class="specialeffects" href="http://luxurypropertiesofaustin.com/results?zip=78746,78733&idx=1425163643&price=1000000-1100000&view1425163643=photo" target="_blank">$1,000,000 - $1,100,000</span></td>
                <td style="text-align: center; font-size:14; background-color: #fcfcfc;">$1,500,001 - $1,750,000</span></td>
                <td style="text-align: center; font-size:14; background-color: #fcfcfc;">$4,000,001 - $5,000,000 </span></td>
                </tr>
                <tr>
                <td style="text-align: center; font-size:14;">$1,100,001 - $1,200,000</span></td>
                <td style="text-align: center; font-size:14;">$1,750,001 - $2,000,000</span></td>
                <td style="text-align: center; font-size:14;">$5,000,001 - $6,000,000 </span></td>
                </tr>
                <tr>
                <td style="text-align: center; font-size:14; background-color: #fcfcfc;">$1,200,001 - $1,300,000</span></td>
                <td style="text-align: center; font-size:14; background-color: #fcfcfc;">$2,000,001 - $2,500,000</span></td>
                <td style="text-align: center; font-size:14; background-color: #fcfcfc;">$6,000,001 - $7,000,000 </span></td>
                </tr>
                <tr>
                <td style="text-align: center; font-size:14;">$1,300,001 - $1,400,000</span></td>
                <td style="text-align: center; font-size:14;">$2,500,001 -...

CSS

* {
    margin: 0;
    padding: 0;
}
.community-wrapper {
    margin: 20px 0 0 20px;
}
.community-wrapper #nav {
    padding-left: 0;
    padding-left: 30px;
    float:left;
    width:100%;
    z-index: -2;
    border-bottom: 1px solid #CCC;
}
.community-wrapper #nav li {
    float: left;
    list-style: none;
}
.community-wrapper #nav li a.active:after {
    content:'';
    border-bottom:2px solid white;
    position:absolute
}
.community-wrapper #nav li a {
    padding: 10px 25px;
    border: 1px solid #DBDBDB;
    /* border-right: 1px solid #CCC; */
    display: block;
    background: #F5F4F4;
    margin-right: 3px;
    border-bottom: 0px;
    color: #424242;
    font-size: 14px;
    text-decoration: none;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}
.community-wrapper #tab-content {
    border: 1px solid #CCC;
    padding: 10px;
    width: 100%;
    float:left;
    margin-top: 0px;
    border-top: 0px;
}
.community-wrapper #tab-content table {
    min-height:150px;
}
.community-wrapper #nav li a.active {
    background: #FFF;
    border-bottom: 1px solid transparent;
    margin-bottom: -3px;
}

JavaScript

$('#tab-content div').hide();
$('#tab-content div:first').show();

$('#nav li').click(function () {
    $('#nav li a').removeClass("active");
    $(this).find('a').addClass("active");
    $('#tab-content div').hide();

    var indexer = $(this).index(); //gets the current index of (this) which is #nav li
    $('#tab-content div:eq(' + indexer + ')').fadeIn(); //uses whatever index the link has to open the corresponding box 
});