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.

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>