Login and Signup tab using jquery

This post make on using tab on login and signup tab concept simple method  design tab style login and registration panel with CSS, HTML and Jquery. Tab system help login and easy register user information.

Live Demo     View coding

CSS

<style type="text/css">
      .design_form
      {
          margin:0 auto;
      }
      
      .design_form input[type=text],.sel
      {
      border: 1px solid #ccc;
      border-radius: 3px;
      box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
      width:200px;
      min-height: 28px;
      padding: 4px 20px 4px 8px;
      font-size: 12px;
      -moz-transition: all .2s linear;
      -webkit-transition: all .2s linear;
      transition: all .2s linear;
      }
      .design_form input[type=text]:focus
      {
      width: 200px;
      border-color: #51a7e8;
      box-shadow: inset 0 1px 2px rgba(0,0,0,0.1),0 0 5px rgba(81,167,232,0.5);
      outline: none;
      }     
      .main
      {
      width:300px;
    margin-left:10px;
      background:-webkit-gradient(linear,left top,left 25,from(#FFFFFF),color-stop(4%,#EEEEEE),to(#FFFFFF));
      background:-moz-linear-gradient(top,#FFFFFF 0%,#EEEEEE 1px,#FFFFFF 25px);
      box-shadow:rgba(0,0,0,0.1) 0px 0px 8px;
      -moz-box-shadow:rgba(0,0,0,0.1) 0px 0px 8px;
      -webkit-box-shadow:rgba(0,0,0,0.1) 0px 0px 8px;
      font-weight:bold;
      }
      
      
      input[type=radio]
      {
      display:none; 
      margin:10px;
      }
      input[type=radio] + label 
      {
      display:inline-block;
      margin:-2px;
      padding: 4px 12px;
      background-color: #3C79DE;
      border-color: #ddd;
      
      }
      
      input[type=radio]:checked + label
      { 
      background-image: none;
      background-color:#E7E7E7;
      }
      </style>

Jquery

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
      <script type="text/javascript">
      $(document).ready(function() {
      $("input[name$='cars']").click(function() {
      var test = $(this).val();
      
      $("div.desc").hide();
      $("#Cars" + test).show();
      });
      });</script>

HTML

<form name="form" action="" method="post">
      <div class="design_form">
      <div class="main">
      <input type="radio" id="radio1" name="cars"   value="2" checked>
      <label for="radio1">Login</label>
      <input type="radio" id="radio2" name="cars"value="3">
      <label for="radio2">Signup</label>
      <input type="radio" id="radio3" name="cars" value="4">
     
      
      <div id="Cars2" class="desc">
      <p>Username<br />
       <input name="name"   class="search2" type="text" required="required" autocomplete="off" >
       </p>
      <p>Password<br />
       <input name="name"   class="search2" type="text" required="required" autocomplete="off" >
       </p>
      </div>
      
      <div id="Cars3" class="desc" style="display: none;">
      <p>Name<br />
      <input name="number"   class="search2" type="text" required="required" autocomplete="off" >     </p>
      <p>&nbsp;</p>
      <p>Your Email_ID<br />
      <input name="email"    class="search2" type="text" required="required" autocomplete="off" >    </p> 
      <p>Password<br />
      <input name="email"    class="search2" type="text" required="required" autocomplete="off" >   </p>    
      </div>
      
    </div></div>
    
      </form>

Live demo

Login Signup

Username

Password

Name

Your Email_ID

Password