Flipping Content Tabs Using jQuery

css

#flip-tabs{
	width:300px;
	margin:0px; position:relative;
}
#flip-navigation{
	margin:0 0 10px; padding:0; 
	list-style:none;
}
#flip-navigation li{ 
	display:inline; 
}
#flip-navigation li a{
	text-decoration:none; padding:10px; 
	margin-right:0px;
	background:#f9f9f9;
	color:#333; outline:none;
	font-size:12px; text-transform:uppercase;
}
#flip-navigation li a:hover{
	background:#999; 
	color:#f0f0f0;
}
#flip-navigation li.selected a{
	background:#999;
	color:#f0f0f0;
}
#flip-container{  
	width:300px;
	font-size:13px;
}
#flip-container div{ 
	background:#fff;
}
#flip-container div ul{
	background:#f9f9f9;
	border:1px solid #f0f0f0;
	margin:0; padding:15px 5px;
	list-style-position:inside;
	padding:20px 10px 10px 20px;
}
#flip-container div ul li{
	padding:5px 0; list-style-type:square;
}
#flip-container div ul.orange{ background:#f9d999; }
#flip-container div ul.green{ background:#d9f9d9; }
#flip-container div ul.blue{ background:#c9d9f9 }

HTML

<div id="flip-tabs">
		<ul id="flip-navigation" >
			<li class="selected"><a href="#" id="tab-0"  >Recent</a></li>
			<li><a href="#" id="tab-1" >Popular</a></li>
			<li><a href="#" id="tab-2" >Comments</a></li>
		</ul>
		<div id="flip-container" >
			<div>
				<ul class="orange">
					<li>Lorem Ipsum is simply dummy text.</li>
					<li>Contrary to popular belief, Lorem  text.</li>
					<li>The standard Ipsum used since the 1500</li>
					<li>It is a long  distracted by the readable</li>
					<li>There are  of Lorem Ipsum available</li>
				</ul>
			</div>
			<div>
				<ul class="green">
					<li>It is a establish distracted by the readable</li>
					<li>There are of Lorem Ipsum available</li>
					<li>Lorem Ipsum is simply of the printing.</li>
					<li>Contrary to popular belief random text.</li>
					<li>The standard psum used since the 1500</li>					
				</ul>
			</div>
			<div>
				<ul class="blue">
					<li>Duis laoreet Fusce iaculis,</li>
					<li>Lorem Ipsum of the printing.</li>
					<li>The standarsum used since the 1500</li>
					<li>There are many of Lorem Ipsum available</li>
					<li>It is will be distracted by the readable</li>					
				</ul>
			</div>
		</div>
	</div>

jQuery Usage

$('document').ready(function(){
		$('#flip-container').quickFlip();
		
		$('#flip-navigation li a').each(function(){
			$(this).click(function(){
				$('#flip-navigation li').each(function(){
					$(this).removeClass('selected');
				});
				$(this).parent().addClass('selected');
				var flipid=$(this).attr('id').substr(4);
				$('#flip-container').quickFlipper('', flipid, 1);
				
				return false;
			});
		});
	});

jquery-1.3.2.js

Click Here to DOWNLOAD

jquery.quickflip.js

Click Here to DOWNLOAD

Example

Click to DEMO