Sliding Tab Using jQuery

Sliding Tab using jQuery

Necessity of space [ in display area] leads us to use new techniques.  So as to minimize the space in short space utilization we are using a tab which on click [ You can use Mouseover/Out Function too ] Maximize and Minimize the other tabs.  Also it’s a  6-7 line Jquery code we used for sliding purpose.
Here it looks like:

Sliding tab – When Load

Sliding Tab – On Click Event

Here is the jQuery code for sliding tab..

$(".all_block").click(function() {
	$(this).animate({width:650},"slow");
	$(this).prevAll("div").animate({width:50},"slow");
	$(this).nextAll("div").animate({width:50},"slow");});
/* Code For Reset All */
$("#reset_").click(function() {
	$("#container").children("div").animate({width:200},"slow");});

For Complete Source click on Read More

<!DOCTYPE html>
<html>
<head>
<title>Sliding Tab</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
body
{
	margin:0;
	padding:0;
}
#container
{
	background:#fff;
	border:1px solid #bfbfbf;
	height:200px;
	margin:20px auto;
	width:800px;
	overflow:hidden;
}
#red_block
{
	background:url('sliding-tab/red.jpg') no-repeat left #be0505;
	float:left;
	height:201px;
	width:200px;
}
#blue_block
{
	background:url('sliding-tab/blue.jpg') no-repeat left #157fb5;
	float:left;
	height:201px;
	width:200px;
}
#green_block
{
	background:url('sliding-tab/green.jpg') no-repeat left #1c9008;
	float:left;
	height:201px;
	width:200px;
}
#violet_block
{
	background:url('sliding-tab/violet.jpg') no-repeat left #5f029a;
	float:left;
	height:201px;
	width:200px;
}
.all_block
{
	cursor:pointer;
}
#tab_controls
{
	height:20px;
	margin:0 auto;
	width:800px;
	overflow:hidden;
}
#tab_controls a
{
	font-family:Trebuchet MS;
	font-size:14px;
	color:red;
	text-decoration:none;
}
#tab_controls span
{
	padding: 0 10px;
}
</style>
</head>
<body>

<div id="container">
	<div id="red_block" class="all_block">

	</div>
	<div id="blue_block" class="all_block">

	</div>
	<div id="green_block" class="all_block">

	</div>
	<div id="violet_block" class="all_block">

	</div>
</div>
<div id="tab_controls">
	<span><a href="#" id="reset_"> Reset All</a></span>
</div>
<script>
$(".all_block").click(function() {
	$(this).animate({width:650},"slow");

	$(this).prevAll("div").animate({width:50},"slow");
	$(this).nextAll("div").animate({width:50},"slow");
});

/* Code For Reset All */
$("#reset_").click(function() {
	$("#container").children("div").animate({width:200},"slow");});

</script>
</body>
</html>

Searched Tags- for this post :
0nikhil animated tab using jquery designikx Jquery source code jquery tab nikhil ughade on click sliding menu on mouseover sliding menu sliding menu Sliding tab sliding tab using jquery jquery accordion effect vertical tab using jquery animated tab sliading effect jquery jquery animate effectX jquery tab design

Hope it will help you.

Thanks,
Nikhil Ughade
(WEB DeSigNer)
Pune,IN

Nikhil on Deviant Art
http://designikx.deviantart.com
Art – community of artists and those devoted to art. Digital art, skin art, themes, wallpaper art, traditional art, photography, poetry / prose. Art prints.

Nikhil on Twitter
https://twitter.com/0nikhil

Advertisements

About Nikhil
Name : Nikhil Ughade UI Developer, Accidentally in design field, no turn back since then. Location : Pune (MH, INDIA) From : Amravati (MH,INDIA) College : VYWS's College Of Engg. Badnera, Amravati Hobby : Social Networking, Designing Web Sites, Photography, Reading Books. In Free time works for NGO.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: