Css style Tab concept using Radio button

This is simple step change the radio button background and making a step by step Tab concept. Try this coding make on few steps follow having a style Tab with using radio button.

Add caption

      Download

CSS

Copy the bellow css this is  directly called the radio button class so don't use class name  call the name in coding input[type=radio] and Label this style hidden the original radio button design. so the label similar function on radio button watch Label coding.

  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;

 }

JavaScript

Script function on Toggle method just show and hide the Div. the Radio button value and class  var test = $(this).val();  the div value increased  $("#Cars" + test).show(); selected radio button value div will be showed.

  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

  <script>

  $(document).ready(function()

   {

    $("input[name$='cars']").click(function()

   {

          var test = $(this).val();

   

          $("div.desc").hide();

          $("#Cars" + test).show();

    });

    });

  </script> 

HTML

<div class="design_form">

<div class="main">

  <input type="radio" id="radio1" name="cars"   value="2" checked>

  <label for="radio1">Home</label>

  <input type="radio" id="radio2" name="cars"value="3">

  <label for="radio2">Login</label>

  <input type="radio" id="radio3" name="cars" value="4">

  <label for="radio3">submit</label> 

      <div id="Cars2" class="desc">

      <p>A website, also written as Web site, web site, or simply site,[2] is a set of related web pages served from a single web domain. A website is hosted on at least one web server, accessible via a network such as the Internet or a private local area network through an Internet address known as a Uniform Resource Locator. All publicly accessible websites collectively constitute the World Wide Web.</p>

      </div>

      <div id="Cars3" class="desc" style="display: none;">

      <p>Your Mobile number &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

      <input name="number"   class="search2" type="text" required="required" autocomplete="off" ></p>

      <p>&nbsp;</p>

      <p>Your Email_ID &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

      <input name="email"    class="search2" type="text" required="required" autocomplete="off" ></p>  

      </div>

      <div id="Cars4" class="desc" style="display: none;">

      <p>A webpage is a document, typically written in plain text interspersed with formatting instructions of Hypertext Markup Language (HTML, XHTML). A webpage may incorporate elements from other websites with suitable markup anchors.</p>

      <p align="center" >  <input class="submit" type="submit" value="send mail" name="submit1"/> </p>

      </div>

   </div></div>

Live Demo