Jquery Tabs With Animations Shadows And Rounded Corners

In the next update of my Youtube Channel Gallery WordPress plugin, I am going to organize the different parts of my plugin in tabs. Although my first thought was using the jQuery UI tabs, I noticed that, if another plugin was using that same widget, it would overwrite the styles of my plugin and I did not need something so complex either. There are many examples about how to create a tab system using only jQuery and in a simple way, but I wanted something with more detail, with animation between tabs, shadows and rounded corners.

Demo

The JavaScript would be as follows:

jQuery(document).ready(function($) {
	$('#tabs .tabscontent>div').not('div:first').hide();
	$('#tabs ul li:first,#tabs .tabscontent>div:first').addClass('active');
	$('#tabs ul li a').click(function(){
		var currentTab = $(this).parent();
		if(!currentTab.hasClass('active')){
			$('#tabs ul li').removeClass('active');				
			$('#tabs .tabscontent>div').slideUp('fast').removeClass('active');
			var currentcontent = $($(this).attr('href'));
			currentcontent.slideDown('fast', function() {
				currentTab.addClass('active');
				currentcontent.addClass('active');
			});
		}
		return false;							
	});
});

The CSS would be as follows:

	* { box-sizing: border-box;}
	body{font-size:11px;font-family:Verdana, Geneva, sans-serif;}
	a{ color: #000;	text-decoration: none;}
	.content *:first-child {margin-top: 0;}
	.content *:last-child {margin-bottom: 0;}
	/*clearfix*/
	.clearfix:before, .clearfix:after { display: table; content: ""; }
	.clearfix:after { clear: both; }
	.clearfix { zoom: 1; }
	/*tabs ul*/
	.tabs ul{
		margin: 0;padding: 0;
	}
	/*tabs li*/
	.tabs li { 
		position: relative; 
		display: inline-block; 
		margin: 1px .2em 0 0; 
		padding: 0;
		list-style: none; white-space: nowrap;
	}
	.tabs li.active a{
		position: relative;
		z-index: 10;
		margin-bottom: -1px;
		padding-bottom: 6px;
		background: #FAFAFA;
		box-shadow: 0 0 8px rgba(0, 0, 0, .2);
	}
	/*tabs a*/
	.tabs a{
		display: inline-block;
		margin-bottom: -5px;
		padding: 5px;
		padding-bottom: 10px;
		border: 1px solid #DFDFDF;
		border-bottom: none;
		border-radius: 5px 5px 0 0;
		background: #F3F3F3;
	}
	/*content*/
	.tabs .tabscontent {
		position: relative;
		display: block;
		float: left; 
		border: 1px solid #DFDFDF;
		border-radius: 5px;
		background: #F3F3F3;
		box-shadow: 0 0 10px rgba(0, 0, 0, .2);
	}
	.tabs .tabscontent .active{
		position: relative;
		z-index: 200;
		display: inline-block;
		border-radius: 5px;
		background: #FAFAFA;
	}
	/*first tab with border-radius 0*/
	.tabs .tabscontent:first-child,
	.tabs .tabscontent .active:first-child {
		border-top-left-radius: 0;
	}
	.tabs .content{
		padding: 20px;
	}

And finally, the HTML will look like this:

	<div id="tabs" class="tabs">
		<ul>
			<li><a href="#tab-1">Tab One</a></li>
			<li><a href="#tab-2">Tab Two</a></li>
			<li><a href="#tab-3">Tab Three</a></li>
		</ul>
		<div class="tabscontent">
			<div id="tab-1">
				<div class="content">
					<h3>Tab One</h3>
				</div>
			</div>
			<div id="tab-2">
				<div class="content">
					<h3>Tab Two</h3>
				</div>
			</div>
			<div id="tab-3">
				<div class="content">
					<h3>Tab Three</h3>
				</div>
			</div>
		</div>
	</div>