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 Demo
Step 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..
ReplyDeletevery guddddddddddddddd...........
ReplyDeletenice
ReplyDeleteveryyy nice thnnnx
ReplyDeletei usually use jquery-ui to implement tab, but this is very nice tutorial, tab with animation on it
ReplyDeletenot running in IE
ReplyDeleteWebpage 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 :)
ReplyDeleteJust 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..
ReplyDelete@IE showing start counter error. I have included in demo for page counts
ReplyDeleteForgot 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.
ReplyDeleteanother css trick to learn and love,thanks a lot guys :]
ReplyDeletesuperr. Thanks From Azerbaijan
ReplyDeleteie6 (ie) fix
ReplyDelete< script type="application/javascript">
replace
< script type="text/javascript">
Nice tut Srinivas.
ReplyDeletewhat program do u use to make wireframe ??
ReplyDeleteAnd how to display "Form Validation ERRORs" on "SignUp" Slide
great job!
ReplyDeleteArielMacintosh™
Wire-frame design with Adobe illustrator
ReplyDeletesuper@
ReplyDeleteExcellent post.Keep it up
ReplyDeleteGood post!. For those who do not have much experience with css. It helps to save space on our web forms.
ReplyDeleteThanks
so simple master...is good
ReplyDeleteThe tabbed effect looks swish! I can think of a few uses for it already. Thanks Srini!
ReplyDeleteGreat 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
ReplyDeleteNice information, I'll might use this on my site
ReplyDeletegood luck brow...
ReplyDeletegreat tutorial, i love your lessones.
ReplyDeleteVery good post with visuvals.
ReplyDeletevery nice blog
ReplyDeletenice
ReplyDeleteHi, I need three tabs to switch with this slide up() and slidedown() function. Can you please give the code?
ReplyDeletevery nice.I love css3. Thanx for sharing..
ReplyDeletesoo nice
ReplyDeleteI made a variation from the basic technique, which comprises more than 2 tabs,
ReplyDeletechanged it (a lot) and forged that:
http://www.nachhilfe-vermittlung.com/hpunkte/index.php?action=register&lang=ger
Thanx for the basic inspiration! :-)
Nice shrinivas.............thanks domino .....now working in IE
ReplyDeleteReally good, thx.
ReplyDeletenice.....
ReplyDeletegreat!..i love your tutorial..thanx again :)
ReplyDeleteThanx...its nice.............!!!!!!!!!!! :)
ReplyDeletehi....the examples r very nice ....its one request for u ,can u put examples of how to edit ready templates and how to keep jquery slider in that
ReplyDeletenice tutorial!... I really need it for my website, thanks for sharing :)
ReplyDeleteI create this form but I am unable to understand how to submit this form for signup and login into my website.
ReplyDelete