Tabs

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

<li>
<a href="#tab5">
<?php
$post_id = 271;
$queried_post = get_post($post_id);
$title = $queried_post->post_title;
echo $title;
?>
</a>
</li>
    
<li>
<a href="#tab6">
<?php
$post_id = 267;
$queried_post = get_post($post_id);
$title = $queried_post->post_title;
echo $title;
?>
</a>
</li>
    
<li>
<a href="#tab7">
<?php
$post_id = 280;
$queried_post = get_post($post_id);
$title = $queried_post->post_title;
echo $title;
?>
</a>
</li>

<li>
<a href="#tab8">
<?php
$post_id = 351;
$queried_post = get_post($post_id);
$title = $queried_post->post_title;
echo $title;
?>
</a>
</li>

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

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

    <div id="tab5" class="tab2_content">
<?php $my_postid = 271;//This is page id or post id
$content_post = get_post($my_postid);
$content = $content_post->post_content;
$content = apply_filters('the_content', $content);
$content = str_replace(']]>', ']]>', $content);
echo $content;?>
    </div>
	
    <div id="tab6" class="tab2_content">
<?php $my_postid = 267;//This is page id or post id
$content_post = get_post($my_postid);
$content = $content_post->post_content;
$content = apply_filters('the_content', $content);
$content = str_replace(']]>', ']]>', $content);
echo $content;?>
    </div>
	
    <div id="tab7" class="tab2_content">
<?php $my_postid = 280;//This is page id or post id
$content_post = get_post($my_postid);
$content = $content_post->post_content;
$content = apply_filters('the_content', $content);
$content = str_replace(']]>', ']]>', $content);
echo $content;?>
    </div>

<div id="tab8" class="tab2_content">
<?php $my_postid = 351;//This is page id or post id
$content_post = get_post($my_postid);
$content = $content_post->post_content;
$content = apply_filters('the_content', $content);
$content = str_replace(']]>', ']]>', $content);
echo $content;?>
    </div>
	
</div>
</div>
<!--tabs content ends-->
<!--tabs end-->                        
                        

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

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

.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 {
    border-bottom: 1px solid #CFCFCF;
    border-left: 1px solid #CFCFCF;
    border-radius: 3px 0 0 0;
    float: left;
    height: 32px;
    list-style: none outside none;
    margin: 12px 0 0;
    padding: 0;
    width: 100%;
}

ul.tabs2 li {
	float: left;
	margin: 0;
	padding: 0;
	height: 31px; /*--Subtract 1px from the height of the unordered list--*/
	line-height: 31px; /*--Vertically aligns the text within the tab--*/
	border: 1px solid #cfcfcf;
	border-left: none;
	margin-bottom: margin: 0 0 -1px 1px; /*--Pull the list item down 1px--*/
	overflow: hidden;
	position: relative;
	background: #e0e0e0;
	border-radius: 3px 3px 0 0;
}
ul.tabs2 li a {
    color: #000000;
    display: block;
    font-size: 16px;
    margin-top: 0;
    outline: medium none;
    padding: 0 20px;
    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;
	border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/
}

.tab2_container {
    background: none repeat scroll 0 0 #FFFFFF;
    border-bottom: 1px solid #CFCFCF;
    border-left: 1px solid #CFCFCF;
    border-radius: 0 3px 3px 3px;
    border-right: 1px solid #CFCFCF;
    clear: both;
    float: left;
    overflow: hidden;
    width: 100%;
}

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

/********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).fadeIn(); //Fade in the active ID content
		return false;
	});

});
</script>