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

Download

The JavaScript would be as follows:

jQuery(document).ready(function($) {

	$(&#039;#tabs .tabscontent&gt;div&#039;).not(&#039;div:first&#039;).hide();
	$(&#039;#tabs ul li:first,#tabs .tabscontent&gt;div:first&#039;).addClass(&#039;active&#039;);

	$(&#039;#tabs ul li a&#039;).click(function(){

		var currentTab = $(this).parent();
		if(!currentTab.hasClass(&#039;active&#039;)){
			$(&#039;#tabs ul li&#039;).removeClass(&#039;active&#039;);				

			$(&#039;#tabs .tabscontent&gt;div&#039;).slideUp(&#039;fast&#039;).removeClass(&#039;active&#039;);

			var currentcontent = $($(this).attr(&#039;href&#039;));
			currentcontent.slideDown(&#039;fast&#039;, function() {
				currentTab.addClass(&#039;active&#039;);
				currentcontent.addClass(&#039;active&#039;);
			});
		}
		return false;							
	});
});

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: &quot;&quot;; }
	.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;
	}

* { 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:

	&lt;div id=&quot;tabs&quot; class=&quot;tabs&quot;&gt;
		&lt;ul&gt;
			&lt;li&gt;&lt;a href=&quot;#tab-1&quot;&gt;Tab One&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href=&quot;#tab-2&quot;&gt;Tab Two&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href=&quot;#tab-3&quot;&gt;Tab Three&lt;/a&gt;&lt;/li&gt;
		&lt;/ul&gt;
		&lt;div class=&quot;tabscontent&quot;&gt;
			&lt;div id=&quot;tab-1&quot;&gt;
				&lt;div class=&quot;content&quot;&gt;
					&lt;h3&gt;Tab One&lt;/h3&gt;
				&lt;/div&gt;
			&lt;/div&gt;
			&lt;div id=&quot;tab-2&quot;&gt;
				&lt;div class=&quot;content&quot;&gt;
					&lt;h3&gt;Tab Two&lt;/h3&gt;
				&lt;/div&gt;
			&lt;/div&gt;
			&lt;div id=&quot;tab-3&quot;&gt;
				&lt;div class=&quot;content&quot;&gt;
					&lt;h3&gt;Tab Three&lt;/h3&gt;
				&lt;/div&gt;
			&lt;/div&gt;
		&lt;/div&gt;
	&lt;/div&gt;