Simple jquery sliding tabs

tabs.html

<style>
.tabs { border-bottom: 1px solid #d4d4d4; padding-left: 0; }
.tabs a { background: #eee; border: 1px solid #d4d4d4; color: #6a6a6a; display: block; float: left; line-height: 36px; margin-bottom: -1px; padding: 0 10px; text-decoration: none; }
.tabs li { list-style: none; }
.tabs .active { background: #fff; border-bottom: 0; color: #2c2c2c; font-weight: 700; padding-bottom: 1px; }
.hide { display: none; }
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
</style>

<ul class="tabs clearfix" role="navigation">
    <li><a class="tab active" href="javascript:void(0);" title="content_1">Tab 1</a></li>
    <li><a class="tab" href="javascript:void(0);" title="content_2">Tab 2</a></li>
    <li><a class="tab" href="javascript:void(0);" title="content_3">Tab 3</a></li>
    <li><a class="tab" href="javascript:void(0);" title="content_4">Tab 4</a></li>
</ul>

<div class="content" id="content_1">
    Content 1
</div>
<div class="content hide" id="content_2">
    Content 2
</div>
<div class="content hide" id="content_3">
    Content 3
</div>
<div class="content hide" id="content_4">
    Content 4
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
(function ($) {
    // When a tab is clicked
    $("a.tab").click(function () {
    // switch all tabs off
    $(".active").removeClass("active");
    // switch clicked tab on
    $(this).addClass("active");
    // slide old content out
    $(".content").slideUp();
    // slide new content in
    var content_show = $(this).attr("title");
    $("#"+content_show).slideDown();
});
})(jQuery);
</script>