jQuery Simple Tabs version 2

HTML

<div id="tabs">
<ul id="tab_links">
        <li id="tab1" class="active">Tab1 Title</li>
        <li id="tab2">Tab2 Title</li>
</ul>
<div id="tab_contents">
<div id="tab1_content">

Some Content

</div>
<div id="tab2_content" style="display: none;">

Some Other Content

</div>


</div>
</div>

<div id="tabs">
<ul id="tab_links">
        <li id="tab12" class="active">Tab1 Title</li>
        <li id="tab2">Tab2 Title</li>
</ul>
<div id="tab_contents">
<div id="tab12_content">

Some Content

</div>
<div id="tab2_content" style="display: none;">

Some Other Content

</div>


</div>
</div>

CSS

ul#tab_links {
list-style:none;
color:#000;
margin:0;
padding:0;
z-index:1;
position:relative;
top:1px;
}
ul#tab_links li {
cursor:pointer;
float:left;
background:#ddd;
border:1px solid #bbb;
padding:5px 10px 3px 10px;
margin:2px 4px 0 0;
font-size:14px;
}
ul#tab_links li:hover {
color:#333;
}
ul#tab_links li.active {
border-bottom:1px solid #fff;
background:#fff;
color:#333;
}
div#tab_contents { z-index:0;
clear:both;
border:1px solid #bbb;
background:#fff;
padding:10px;
}

JavaScript

$(document).ready(function() {
    //Add a click function to all list elements within ul#tab_links
    $('ul#tab_links li').click(function() {
    //Remove the active class from all the list elements and hide all the tab contents
    $('ul#tab_links li').removeClass('active');
    $('div#tab_contents').children().hide();
    
    //Add the active class to the clicked element and show its contents
    $(this).addClass('active');
    $('div#' + jQuery(this).attr('id') + '_content').show();
    });
});