This post is very basic level CSS implementation. I want to explain how to design tab style login and registration panel with CSS, HTML and Jquery. Tab system help you to save page space, Just take a quick look at these four steps, use it and enrich your web projects. I had implemented this at labs.9lessons.info.
Download Script 
Live DemoStep 1
Layout divided into three horizontal parts are Container, Tabbox and Panel. Here Container is the parent div.HTML Code
<div id="container">
<div id="tabbox"></div>
<div id="panel"></div>
</div>
<div id="tabbox"></div>
<div id="panel"></div>
</div>
CSS Code
#container
{
width:350px
}
#tabbox
{
height:40px
}
#panel
{
background-color:#FFF;
height:300px;
}
{
width:350px
}
#tabbox
{
height:40px
}
#panel
{
background-color:#FFF;
height:300px;
}
Step 2
Tabbox div divided into two vertical parts called tabs are Login and SignupHTML Code
<div id="tabbox">
<a href="#" id="signup" class="tab signup">Signup</a>
<a href="#" id="login" class="tab select">Login</a>
</div>
<a href="#" id="signup" class="tab signup">Signup</a>
<a href="#" id="login" class="tab select">Login</a>
</div>
CSS Code
Contains CSS3 code for round corners. Here signup class for margin left 8px it allots gap between login and signup tabs.
.tab
{
background: #dedede;display: block;height: 40px;
line-height: 40px;text-align: center;
width: 80px;float: right;font-weight: bold;
-webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 4px;
-moz-border-radius: 4px 4px 0px 0px;
}
a
{
color: #000;
margin: 0;
padding: 0;
text-decoration: none;
}
.signup
{
margin-left:8px;
}
.select
{
background-color:#FFF;
}
{
background: #dedede;display: block;height: 40px;
line-height: 40px;text-align: center;
width: 80px;float: right;font-weight: bold;
-webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 4px;
-moz-border-radius: 4px 4px 0px 0px;
}
a
{
color: #000;
margin: 0;
padding: 0;
text-decoration: none;
}
.signup
{
margin-left:8px;
}
.select
{
background-color:#FFF;
}
Step 3
Now Panel div divided into two horizontal parts are Loginbox and Signupbox. By default Signupbox display none.HTML Code
<div id="panel">
<div id="loginbox">Login Form</div>
<div id="signupbox">Signup Form</div>
</div>
<div id="loginbox">Login Form</div>
<div id="signupbox">Signup Form</div>
</div>
CSS Code
#loginbox
{
min-height:200px;
padding:10px;
}
#signupbox
{
min-height:200px;
padding:10px;
display:none;
}
{
min-height:200px;
padding:10px;
}
#signupbox
{
min-height:200px;
padding:10px;
display:none;
}
Step 4
Handling DOM objects with Javscript . 
Javascript Code
$(".tab").click(function(){})- tab is the class name of anchor tag. Using $(this).attr('id') - calling the anchor tag ID value.
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".tab").click(function()
{
var X=$(this).attr('id');
if(X=='signup')
{
$("#login").removeClass('select');
$("#signup").addClass('select');
$("#loginbox").slideUp();
$("#signupbox").slideDown();
}
else
{
$("#signup").removeClass('select');
$("#login").addClass('select');
$("#signupbox").slideUp();
$("#loginbox").slideDown();
}
});
});
</script>
ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".tab").click(function()
{
var X=$(this).attr('id');
if(X=='signup')
{
$("#login").removeClass('select');
$("#signup").addClass('select');
$("#loginbox").slideUp();
$("#signupbox").slideDown();
}
else
{
$("#signup").removeClass('select');
$("#login").addClass('select');
$("#signupbox").slideUp();
$("#loginbox").slideDown();
}
});
});
</script>
wow..
very guddddddddddddddd...........
nice
veryyy nice thnnnx
i usually use jquery-ui to implement tab, but this is very nice tutorial, tab with animation on it
not running in IE
Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0)
Timestamp: Mon, 2 May 2011 11:45:28 UTC
Message: Syntax error
Line: 22
Char: 10
Code: 0
URI: http://demos.9lessons.info/counter.html
nice tut srini :)
Just one small question? What program or app do you use to draw your concepts with? I would love to do what you do in the diagram demonstration. Thanks for the codes..
very nice
@IE showing start counter error. I have included in demo for page counts
Forgot about the download script should work with IE
labs.9lessons.info
thank you. This one has a issue on internet explorer 9. Forms don't display. Works in firefox though.
another css trick to learn and love,thanks a lot guys :]
superr. Thanks From Azerbaijan
ie6 (ie) fix
< script type="application/javascript">
replace
< script type="text/javascript">
Nice tut Srinivas.
what program do u use to make wireframe ??
And how to display "Form Validation ERRORs" on "SignUp" Slide
great job!
ArielMacintosh™
Wire-frame design with Adobe illustrator
nice
super@
Excellent post.Keep it up
Good post!. For those who do not have much experience with css. It helps to save space on our web forms.
Thanks
so simple master...is good
The tabbed effect looks swish! I can think of a few uses for it already. Thanks Srini!
Great information thanks for sharing this with us.In fact in all posts of this blog their is something to learn . your work is very good and i appreciate your work and hopping for some more informative posts . Again thanks
Nice information, I'll might use this on my site
good luck brow...
great tutorial, i love your lessones.
Very good post with visuvals.
very nice blog
nice
Hi, I need three tabs to switch with this slide up() and slidedown() function. Can you please give the code?
very nice.I love css3. Thanx for sharing..
soo nice
I made a variation from the basic technique, which comprises more than 2 tabs,
changed it (a lot) and forged that:
http://www.nachhilfe-vermittlung.com/hpunkte/index.php?action=register&lang=ger
Thanx for the basic inspiration! :-)