Create a Tabbed Content With jQuery And CSS<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create a Tabbed Content With jQuery And CSS</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.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();
return false
});
});
</script>
</head>
<body>
<div id="tabbed_box_1">
<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>
<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>
</body>
</html>
