<div id="tabbar">
<div class="open">Details</div>
<div>Package</div>
<div>Databases</div>
<div>Reviews</div>
</div>
<div class="panel open">
Simple panel with Tabs
</div>
<div class="panel">
Super Beauty Magic Rabbit Tab Panel 2.6.3
</div>
<div class="panel">
Mega Ultra Droingo Database 9.6.4
</div>
<div class="panel">
"I never thought a tab panel could change my life, until I tried Super Beauty Magic Rabbit Tab Panel 2.6.3"
</div>
Details
Package
Databases
Reviews
Simple panel with Tabs
Super Beauty Magic Rabbit Tab Panel 2.6.3
Mega Ultra Droingo Database 9.6.4
"I never thought a tab panel could change my life, until I tried Super Beauty Magic Rabbit Tab Panel 2.6.3"
<style>
div#tabbar div {
float: left;
padding: 4px 10px;
margin: 0 5px;
background: #cccccc;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
}
div#tabbar div:first-child {
margin-left: 3px;
}
div#tabbar div.open {
background: #53b2fc;
color: #fffff9;
cursor: default;
}
div.panel {
border: 1px solid #999;
border-top: 3px solid #666;
display: none;
height: 200px;
margin-top:10px;
margin-bottom:10px;
padding: 6px;
}
div.panel.open {
clear: both;
display: block;
}
</style>
Javascript:<script type="text/javascript">
$(document).ready(function() {
/**
* Tab select code
*/
$('div#tabbar div').click(function() {
if (!$(this).hasClass('open')) {
// Set all tabs to un-open
$('div#tabbar div.open').removeClass('open');
// Set clicked tab to open
$(this).addClass('open');
// Undisplay all content
$('div.panel').removeClass('open');
// Display selected content
$('div.panel').eq($('div#tabbar div').index(this)).addClass('open');
}
});
});
</script>
