Animated Tabs with jQuery & CSS3

Tabs - used to toggle between several item contents in a minimal space.  In this tutorial I am going to tell you how to create Animated Responsive Tabs using jQuery & CSS3 effects.

Image may be NSFW.
Clik here to view.

Animated Tabs using jQuery & CSS3

jQuery Code

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

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

		$("ul.tabs li").removeClass("active"); //Remove any "active" class
		$(this).addClass("active"); //Add "active" class to selected tab
		$(".tab-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;
	});

HTML Code

<ul class="tabs">
  <li class="active"><a href="#tab1">HTML5</a></li>
  <li class=""><a href="#tab2">CSS3</a></li>
  <li class=""><a href="#tab3">jQuery</a></li>
</ul>

<div class="tab-container">

  <div id="tab1" class="tab-content animate2 wobble">
  <p>content 1</p>
  </div>

  <div id="tab2" class="tab-content animate2 flipInX">
  <p>content 2</p>
  </div>

  <div id="tab3" class="tab-content animate2 rotateIn">
  <p>content 3</p>
  </div>

</div>

Please don’t forget to share and subscribe to latest updates of the blog.  Comments and feedbacks are always welcome!

Thanks!

View Live Demo & Download