Tabbed Menu

                        
                          <!--tabs start-->
<!--tabs heading starts-->
<div class="boxtabs">

<ul class="tabs2">
<li>
<a href="#tab5">
tab 1</br><h1>tab description</h1>
</a>
</li>
    
<li>
<a href="#tab6">
tab 2</br><h1>tab description</h1>
</a>
</li>
    
<li>
<a href="#tab7">
tab3</br><h1>tab description</h1>
</a>
</li>

<li>
<a href="#tab8">
tab4</br><h1>tab description</h1>
</a>
</li>

<li>
<a href="#tab9">
tab5</br><h1>tab description</h1>
</a>
</li>

</ul>
<!--tabs heading ends-->

<!--tabs content starts-->
<div class="tab2_container">

    <div id="tab5" class="tab2_content">
tab1
<h2>click to close</h2>
    </div>
	
    <div id="tab6" class="tab2_content">
tab 2
<h2>click to close</h2>
    </div>
	
    <div id="tab7" class="tab2_content">
tab 3
<h2>click to close</h2>
    </div>

<div id="tab8" class="tab2_content">
tab 4
<h2>click to close</h2>
    </div>
	
	<div id="tab9" class="tab2_content">
tab 5
<h2>click to close</h2>
    </div>
	
</div>
</div>
<!--tabs content ends-->
<!--tabs end-->                        
                        

                        
                          /********tabs start********/

.boxtabs {
    float: left;
    margin-top: -12px;
    width: 100%;
}

.boxtabs a{
color: #000000;
    display: block;
    font-size: 16px;
    margin-top: 0;
    outline: medium none;
    padding-right: 20px;
    padding-top: 6px;
    text-decoration: none;
	}

.boxtabs  h1{
color:#000000;
font-size:12px;
}

.boxtabs img {
    border: medium none;
    display: block;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-top: 6px;
    max-height: 185px;
    max-width: 300px;
    width: auto;
}


ul.tabs2 li:last-of-type {
    border: medium none;
}

ul.tabs2 {
    border-bottom: medium none;
    border-radius: 3px 0 0 0;
    float: left;
    height: 60px;
    list-style: none outside none;
    margin: 2px 0 0;
    padding: 0 0 17px;
    width: 792px;
}

ul.tabs2 li a {
    color: #000000;
    display: block;
    font-size: 16px;
    margin-top: 0;
    outline: medium none;
    padding-right: 20px;
    padding-top: 6px;
    text-decoration: none;
}


/*ul.tabs2 li a:hover {
	background: #ccc;
}*/
html ul.tabs2 li.active, html ul.tabs2 li.active a:hover  { /*--Makes sure that the active tab does not listen to the hover properties--*/
	background: #fff;
}

.tab2_container {
    background: none repeat scroll 0 0 #FAFAFA;
    border-top: 1px solid #CFCFCF;
    clear: both;
    color: #000000;
    float: left;
    overflow: hidden;
    width: 100%;
}

#tab5, #tab6, #tab7, #tab8, #tab9{
    border-bottom: 1px solid #CFCFCF;
	}


.tab2_content {
    font-size: 1.2em;
    padding: 20px 20px 3px;
}

.tab2_content h2 {
    cursor: pointer;
    font-size: 12px;
    font-weight: normal;
    margin: 0;
    padding: 0;
    text-align: center;
    text-transform: capitalize;
    width: 100%;
}
/********tabs end********/                        
                        

                        
                          <script type="text/javascript">
$(document).ready(function() {

	//When page loads...
	$(".tab2_content").hide(); //Hide all content
	$("ul.tabs2 li:first").addClass("active").show(); //Activate first tab
	//$(".tab2_content:first").show(); //Show first tab content

	//On Click Event
	$("ul.tabs2 li").click(function() {

		$("ul.tabs2 li").removeClass("active"); //Remove any "active" class
		$(this).addClass("active"); //Add "active" class to selected tab
		$(".tab2_content").hide(); //Hide all tab content

		var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
		$(activeTab).slideDown(); //Fade in the active ID content
		return false;
	});

});
</script>

<script type="text/javascript">
$(document).ready(function() {
$(".tab2_content h2").click(function() {
$(".tab2_content").slideUp(); //Hide all tab content
});
});
</script>