2 Create a Tabbed Content With jQuery And CSS

Create a Tabbed Content With jQuery And CSS

Download Code

<style>
body {
background-position:top center;
background-color:#EBE9E1;
margin:40px;
}
#tabbed_box_1 {
margin: 0px auto 0px auto;
width:300px;
}
.tabbed_area {
border:2px solid #E6E6E6;
background-color:#F5F4F0;
padding:8px;

border-radius: 8px; /*w3c border radius*/
box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* w3c box shadow */
-moz-border-radius: 8px; /* mozilla border radius */
-moz-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* mozilla box shadow */
background: -moz-linear-gradient(center top, #a4ccec, #72a6d4 25%, #3282c2 45%, #357cbd 85%, #72a6d4); /* mozilla gradient background */
-webkit-border-radius: 8px; /* webkit border radius */
-webkit-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* webkit box shadow */
background: -webkit-gradient(linear, center top, center bottom, from(#a4ccec), color-stop(25%, #72a6d4), color-stop(45%, #3282c2), color-stop(85%, #357cbd), to(#72a6d4)); /* webkit gradient background */
}
ul.tabs {
margin:0px; padding:0px;
margin-top:5px;
margin-bottom:6px;
}
ul.tabs li {
list-style:none;
display:inline;
}
ul.tabs li a {
background-color:#EBE9E1;
color:#000000;
padding:8px 14px 8px 14px;
text-decoration:none;
font-size:9px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
text-transform:uppercase;
border:1px solid #FFFFFF;
background-position:bottom;
}
ul.tabs li a:hover {
background-color:#E4E3DD;
border-color:#FFFFFF;
}
ul.tabs li a.active {
background-color:#ffffff;
color:#282e32;
border:1px solid #EBE9E1;
border-bottom: 1px solid #ffffff;
background-image:url(tab_on.jpg);
background-repeat:repeat-x;
background-position:top;
}
.content {
background-color:#ffffff;
padding:10px;
border:1px solid #EBE9E1; 
font-family:Arial, Helvetica, sans-serif;
background-image:url(content_bottom.jpg);
background-repeat:repeat-x;
background-position:bottom;
}
#content_2, #content_3 { display:none; }

.content ul {
margin:0px;
padding:0px 0px 0px 0px;
}
.content ul li {
list-style:none;
border-bottom:1px solid #d6dde0;
padding-top:15px;
padding-bottom:15px;
font-size:13px;
}
.content ul li:last-child {
border-bottom:none;
}
.content ul li a {
text-decoration:none;
color:#3e4346;
}
.content ul li a small {
color:#8b959c;
font-size:9px;
text-transform:uppercase;
font-family:Verdana, Arial, Helvetica, sans-serif;
position:relative;
left:4px;
top:0px;
}
.content ul li a:hover {
color:#a59c83;
}
.content ul li a:hover small {
color:#baae8e;
}
</style>
 <script src="jquery-1.2.3.min.js"></script>
 <script>
  $(document).ready(function(){
 $("a.tab").click(function () {
  $(".active").removeClass("active");
  $(this).addClass("active");
  $(".content").slideUp();
  var content_show = $(this).attr("title");
  $("#"+content_show).slideDown();
 });
});
</script>
<div id="tabbed_box_1" class="tabbed_box">
 <div class="tabbed_area">
 <ul class="tabs">
         <li><a href="#" title="content_1" class="tab active">Popular</a></li>
         <li><a href="#" title="content_2" class="tab">Latest</a></li>
         <li><a href="#" title="content_3" class="tab">Comments</a></li>
     </ul>
     <div id="content_1" class="content">
      <ul>
          <li><a href="">Testing The Elements <small>January 11, 2010</small></a></li>
          <li><a href="">Testing Some Boxes <small>January 11, 2010</small></a></li>
          <li><a href="">Image in a post<small>January 11, 2010</small></a></li>
          <li><a href="">Sed tincidunt augue et nibh <small>November 11, 2011</small></a></li>
          <li><a href="">Morbi rhoncus arcu egestas erat <small>December 11, 2011</small></a></li>
          <li><a href="">Web Development <small>December 18, 2011</small></a></li>
  </ul>
     </div>
     <div id="content_2" class="content">
      <ul>
          <li><a href="">Image in a post <small>January 11, 2010</small></a></li>
          <li><a href="">Testing The Elements<small>January 11, 2010</small></a></li>
          <li><a href="">Testing Some Boxes<small>January 11, 2010</small></a></li>
          <li><a href="">Lobortis tellus diam <small>January 11, 2010</small></a></li>
          <li><a href="">This is another featured post<small>January 7, 2011</small></a></li>
          <li><a href="">Testing The Elements<small>January 20, 2011</small></a></li>
  </ul>
     </div>
     <div id="content_3" class="content">
      <ul>
          <li><a href="">admin: Looks like the Old Course at St. Andrews!...</a></li>
          <li><a href="">admin: Very nice boxes!...</a></li>
          <li><a href="">admin: And another threaded reply!...</a></li>
          <li><a href="">admin: This is a threaded reply!...</a></li>
          <li><a href="">admin: And this is a third comment with some lorem ipsum!...</a></li>
  </ul>
     </div>
 </div>
</div>