Create Flipping Content Tabs Using jQuery

Posted in jQuery

Content Tabs have become more popular lately with more and more websites and blogs using them to show more content in lesser space. Today I am going to show you how to create content tabs with nice flipping effect.

Flipping Content Tabs

For this, you will need the QuickFlip jQuery Plugin by Jon Raasch and of course, the latest version of the incredible jQuery library.

The HTML Structure

Here’s the HTML structure you’ll need to use:

<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>
			<!--Put Content for first tab here-->
		</div>
		<div>
			<!--Put Content for second tab here-->
		</div>
		<div>
			<!--Put Content for third tab here-->
		</div>
	</div>
</div>

You can add as many tabs as you like just add more div tags inside the flip-container div and to make them accessible, do add entries in the flip-navigation list to make navigation tab for new div’s. The id field of a tag in the flip-navigation list items is important.
The id’s are of type tab-x where x is the index of the content div in the flip-container. The index starts from zero, so if you add a new div below the third content div, then the id of the navigation link corresponding to it will be tab-3.

Another thing to keep in mind is the selected CSS class, that is added to the navigation item corresponding to currently open content tab.

The CSS Styles

Here are a few styles i applied to the above HTML structure. These can be customized to whatever you want.

#flip-tabs{
	width:300px;
	margin:20px auto; 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-family:Arial; 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-family:Arial; font-size:13px;
}
#flip-container div{ 
	background:#fff;
}

The JavaScript Code

Finally, the javascript code that will make your flipping content tabs work:

$('document').ready(function(){
	//initialize quickflip
	$('#flip-container').quickFlip();
		
	$('#flip-navigation li a').each(function(){
		$(this).click(function(){
			$('#flip-navigation li').each(function(){
				$(this).removeClass('selected');
			});
			$(this).parent().addClass('selected');
			//extract index of tab from id of the navigation item
			var flipid=$(this).attr('id').substr(4);
			//Flip to that content tab
			$('#flip-container').quickFlipper({ }, flipid, 1);
			
			return false;
		});
	});
});

Code Explanation: On document ready, we initialize the quickflip plugin as on Line 3 by calling it for flip-container div. One thing to keep in mind is that if you change the id of flip-container div, remember to change it in JavaScript too.
After that the click event of navigation list is controlled and on click, the clicked item is added the selected CSS class and we call the quickFlipper() function to flip to the selected content tab.

quickFlipper() function allows you to control the speed of flipping by providing options in the first parameter. e.g.

quickflipper({ openSpeed:200, closeSpeed:250 }, flipid, 1);

Also, do not change the value third parameter which is the number of times the flip event occurs. You can read more about quickFlipper function here.

You can view the working demo or download the source code and try it.

Tell me how you liked this tutorial and provide with suggestions for improvement.

Tags:

Share


Subscribe to Full RSS Feed

RSS FeedIf you found this article useful, then consider subscribing to our RSS Feed or e-mail updates to stay updated with latest Web Design/ Development articles. You can also follow @webdevplus on twitter for latest updates.

15 Responses (Add Your Comment)

  1. Nice piece of work Satbir…… keep it up……

  2. Rahul Jadhav says:

    great word dude..you rock

  3. sassm says:

    Great flipping tab Thank you very much for your work!!!!
    if u r ever in Crete Greece for holidays I will buy you a bear :)
    one question if someone knows 1st am noob 2nd here is the question
    I have the tab within a div that is not very high but if I have more content in the tabs it overflows to the next div bellow example
    div coloured blue
    in there the tabs
    blue div closes
    div coloured green
    some content here
    green div closes

    but tabs overflow overlay (say it as you want ) the green one ???? I am sure its something minor with csss but what I am scratching my head 2 days now
    if anyone can answer I would appreciate it and thank for your time

  4. SiGa says:

    Very neat, those tabs, thanks for the great tutorial!

  5. jcargoo says:

    Hey this is nice.
    Check another one I have developed here : http://www.jcargoo.org/2009/02/jquery-tabbed-box.html

  6. kiran says:

    there is problem in using inside(nesting) probebly we have to look into var flipid=$(this).attr(‘id’).substr(4);

  7. Omar says:

    Thanks for the great tutorial. I have a problem that perhaps someone can help me with. The tabs work wonderfully with text, however when I embed a YouTube video into any of the tabs it breaks everything. When you click into another tab the YouTube video gets embedded twice and on top of everything. When you click back into the div where the YouTube video is embedded, it “fixes” everything and the video gets embedded into the tab. Is this a known issue or am I doing something wrong? I have tried other “flip” jquery plugins and they all show this behavior.

    Thanks!

Comments are closed for this post.