Create a Sliding tab contents tab jquery
Demo
http://dl.dropbox.com/u/7106563/r-ednalan/Slidingf_tab.html
<style>
*{
margin:0px;
padding:0px;
}
body{
color:#444444;
font-size:13px;
background: #f2f2f2;
font-family:"Century Gothic", Helvetica, sans-serif;
}
#content{
text-align:center;
height:100%;
margin-left:20px;
margin-top:20px;
}
#wrapper{
-moz-box-shadow:0px 0px 3px #aaa;
-webkit-box-shadow:0px 0px 3px #aaa;
box-shadow:0px 0px 3px #aaa;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
border:2px solid #fff;
background-color:#FFFFFF;
width:520px;
overflow:hidden;
}
#slides{
width:600px;
/*height:320px;*/
overflow:hidden;
}
.slides_contents{
float:left;
width:600px;
/*height:320px;*/
}
#navigation{
height:45px;
background-color:#EBEBEB;
border-top:1px solid #fff;
-moz-border-radius:0px 0px 5px 5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
}
#navigation ul{
list-style:none;
float:left;
margin-left:22px;
}
#navigation ul li{
float:left;
border-right:1px solid #ccc;
border-left:1px solid #ccc;
position:relative;
margin:0px 2px;
}
#navigation ul li a{
display:block;
height:45px;
background-color:#444;
color:#777;
outline:none;
font-weight:bold;
text-decoration:none;
line-height:45px;
padding:0px 20px;
border-right:1px solid #fff;
border-left:1px solid #fff;
background:#FBFBFB;
background:
-webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.09, rgb(240,240,240)),
color-stop(0.55, rgb(227,227,227)),
color-stop(0.78, rgb(240,240,240))
);
background:
-moz-linear-gradient(
center bottom,
rgb(240,240,240) 9%,
rgb(227,227,227) 55%,
rgb(240,240,240) 78%
)
}
#navigation ul li a:hover,
#navigation ul li.selected a{
background:#d8d8d8;
color:#666;
text-shadow:1px 1px 1px #fff;
}
#slides form fieldset{
border:none;
padding-bottom:20px;
}
#slides form legend{
text-align:left;
background-color:#EBEBEB;
color:#2D3B40;
font-size:24px;
text-shadow:1px 1px 1px #fff;
font-weight:bold;
float:left;
width:100%;
padding:5px 0px 5px 10px;
margin:10px 0px;
border-bottom:1px solid #949494;
border-top:1px solid #828282;
}
#slides form p{
float:left;
clear:both;
margin:5px 0px;
border:0px solid #fff;
width:100%;
}
#slides form p label{
width:160px;
float:left;
text-align:right;
margin-right:15px;
line-height:26px;
color:#666;
text-shadow:1px 1px 1px #fff;
font-weight:bold;
}
#slides form input{
background: #ffffff;
border: 1px solid #ddd;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
outline: none;
padding: 5px;
width: 200px;
float:left;
}
#slides form input:focus{
-moz-box-shadow:0px 0px 3px #aaa;
-webkit-box-shadow:0px 0px 3px #aaa;
box-shadow:0px 0px 3px #aaa;
background-color:#FFFEEF;
}
#slides form button {
border:none;
outline:none;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
color: #ffffff;
display: block;
cursor:pointer;
margin: 0px auto;
clear:both;
padding: 5px 20px;
text-shadow: 0 1px 1px #777;
font-weight:bold;
font-family:"Century Gothic", Helvetica, sans-serif;
font-size:18px;
-moz-box-shadow:0px 0px 3px #aaa;
-webkit-box-shadow:0px 0px 3px #aaa;
box-shadow:0px 0px 3px #aaa;
background:#969B9F;
}
#slides form button:hover {
background:#7F9DB9;
color:#666;
text-shadow:1px 1px 1px #fff;
}
#slides form .submitbutton {
width:650px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var fieldsetCount = $('#formElem').children().length; //number of fieldsets
var current = 1; //current position of fieldset
var slidesWidth = 0; //widths of each one of the fieldsets
var widths = new Array();
$('#slides .slides_contents').each(function(i){
var $slides_contents = $(this);
widths[i] = slidesWidth;
slidesWidth += $slides_contents.width();
});
$('#slides').width(slidesWidth);
$('#formElem').children(':first').find(':input:first').focus(); //to avoid problems in IE, focus the first input of the form
$('#navigation a').bind('click',function(e){
var $this = $(this);
var prev = current;
$this.closest('ul').find('li').removeClass('selected');
$this.parent().addClass('selected');
current = $this.parent().index() + 1;
$('#slides').stop().animate({
marginLeft: '-' + widths[current-1] + 'px'
});
e.preventDefault();
});
});
</script>
<div id="content">
<div id="wrapper">
<div id="slides">
<form id="formElem" name="formElem" action="" method="post">
<fieldset class="slides_contents">
<legend>Account</legend>
<p>
<label for="username">User name</label>
<input id="username" name="username" />
</p>
<p>
<label for="name">Name</label>
<input id="name" name="name" />
</p>
<p>
<label for="email">Email</label>
<input id="email" name="email" placeholder="ednalan@yahoo.com" type="email" AUTOCOMPLETE=OFF />
</p>
<p>
<label for="password">Password</label>
<input id="password" name="password" type="password" AUTOCOMPLETE=OFF />
</p>
<p class="submitbutton">
<button type="submit">Submit</button>
</p>
</fieldset>
<fieldset class="slides_contents">
<legend>Profile</legend>
<div style="text-align:left;width:500px;margin:10px 10px 10px 10px;">
Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum ipsum.
Proin imperdiet est. Phasellus dapibus semper urna. Pellentesque ornare, <br/><br/>
Proin imperdiet est. Phasellus dapibus semper urna. Pellentesque ornare, <br/><br/>
Proin imperdiet est. Phasellus dapibus semper urna. Pellentesque ornare, <br/><br/>
orci in felis. Donec ut ante. In id eros. Suspendisse lacus turpis, cursus egestas at sem.
</div>
</fieldset>
</form>
</div>
<div id="navigation" >
<ul>
<li class="selected">
<a href="#">Account</a>
</li>
<li>
<a href="#">Profile</a>
</li>
</ul>
</div>
</div>
</div>
