title: Two html forms which can be switched using a tab
body: <p>I have a normal existing form I made using the css which I have provided below</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html lang="en-GB"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /&gt;
      &lt;title&gt;Payment Page&lt;/title&gt;   
      &lt;link rel="stylesheet" href="demo.css"&gt;
      &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="jquery.creditCardValidator.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="demo.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;script type="text/javascript" src="http://paweldecowski.github.com/jQuery-CreditCardValidator/jquery.creditCardValidator.js"&gt;&lt;/script&gt;
  &lt;div class="demo"&gt;
              &lt;form&gt;
                  &lt;h2&gt;Card Payment&lt;/h2&gt;
                  &lt;input type='hidden' id='ccType' name='ccType' /&gt;     
                          &lt;ul class="cards"&gt;
                              &lt;li class="visa"&gt;Visa&lt;/li&gt;
                              &lt;li class="visa_electron"&gt;Visa Electron&lt;/li&gt;
                              &lt;li class="mastercard"&gt;MasterCard&lt;/li&gt;
                              &lt;li class="maestro"&gt;Maestro&lt;/li&gt;                            
                          &lt;/ul&gt;                  
                          &lt;label for="card_number"&gt;Card number&lt;/label&gt;
                          &lt;input type="text" name="card_number" id="card_number"&gt; 
                      &lt;div class="vertical"&gt;
                                  &lt;label for="expiry_date"&gt;Expiry date &lt;small&gt;mm/yy&lt;/small&gt;&lt;/label&gt;
                                  &lt;input type="text" name="expiry_date" id="expiry_date" maxlength="5"&gt;
                                  &lt;label for="cvv"&gt;CVV&lt;/label&gt;
                                  &lt;input type="text" name="cvv" id="cvv" maxlength="3"&gt;                        
                      &lt;/div&gt;
                      &lt;div class="vertical maestro"&gt;                        
                                  &lt;label for="issue_date"&gt;Issue date &lt;small&gt;mm/yy&lt;/small&gt;&lt;/label&gt;
                                  &lt;input type="text" name="issue_date" id="issue_date" maxlength="5"&gt;                            
                                  &lt;span class="or"&gt;or&lt;/span&gt;
                                  &lt;label for="issue_number"&gt;Issue number&lt;/label&gt;
                                  &lt;input type="text" name="issue_number" id="issue_number" maxlength="2"&gt;                       
                      &lt;/div&gt;                   
                          &lt;label for="name_on_card"&gt;Name On card&lt;/label&gt;
                          &lt;input type="text" name="name_on_card" id="name_on_card"&gt; 
               &lt;input type="submit" value="Pay Now !"&gt; 
  
              &lt;/form&gt;
   &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS is</p>
  
  <pre><code>    .demo .numbers {
  
            background-color: #ffd;
            border: 1px solid #eec;
            margin
  
  -bottom: 32px;
        padding: 16px 20px;
      }
      .demo .numbers p {
        margin-bottom: 0;
      }
      .demo .numbers .list {
        margin-bottom: 0;
      }
      .example {
        clear: both;
        margin-bottom: 32px;
      }
      .cards {
        overflow: hidden;
      }
      .cards li {
        -webkit-transition: all 0.2s;
        -moz-transition: all 0.2s;
        -ms-transition: all 0.2s;
        -o-transition: all 0.2s;
        transition: all 0.2s;
        background-image: url('http://paweldecowski.github.com/jQuery-CreditCardValidator/card_logos.png');
        background-position: 0 0;
        float: left;
        height: 32px;
        margin-right: 8px;
        text-indent: -9999px;
        width: 51px;
      }
      .cards li:last-child {
        margin-right: 0;
      }
      .cards .visa_electron {
        background-position: 204px 0;
      }
      .cards .mastercard {
        background-position: 153px 0;
      }
      .cards .maestro {
        background-position: 102px 0;
      }
      .cards .discover {
        background-position: 51px 0;
      }
      .cards .visa.off {
        background-position: 0 32px;
      }
      .cards .visa_electron.off {
        background-position: 204px 32px;
      }
      .cards .mastercard.off {
        background-position: 153px 32px;
      }
      .cards .maestro.off {
        background-position: 102px 32px;
      }
      .cards .discover.off {
        background-position: 51px 32px;
      }
      form {
        -webkit-box-shadow: 0 1px 3px #bbbbbb;
        -moz-box-shadow: 0 1px 3px #bbbbbb;
        box-shadow: 0 1px 3px #bbbbbb;
        background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f5f5f5));
        background: -webkit-linear-gradient(#ffffff, #f5f5f5);
        background: -moz-linear-gradient(#ffffff, #f5f5f5);
        background: -ms-linear-gradient(#ffffff, #f5f5f5);
        background: -o-linear-gradient(#ffffff, #f5f5f5);
        background: linear-gradient(#ffffff, #f5f5f5);
        background-color: #f8f8f8;
        border: 5px solid #fff;
        margin: 0 auto 32px;
        padding: 12px 24px 24px;
        width: 287px;
      }
      form h2 {
        color: #555;
        font-family: "Helvetica Neue", Verdana, Geneva, Arial, Helvetica, sans-serif;
        font-size: 16px;
        font-style: normal;
        margin-bottom: 0;
      }
      form li {
        margin: 8px 0;
      }
      form label {
        color: #555;
        display: block;
        font-size: 14px;
      }
      form label small {
        color: #aaa;
        font-size: 11px;
        line-height: 11px;
        text-transform: uppercase;
      }
      form input {
        -webkit-box-shadow: inset 0 1px 3px -1px #aaaaaa;
        -moz-box-shadow: inset 0 1px 3px -1px #aaaaaa;
        box-shadow: inset 0 1px 3px -1px #aaaaaa;
        border: 1px solid #aaa;
        border-color: #aaa #ddd #ddd #aaa;
        color: #333;
        display: block;
        font-size: 18px;
        height: 30px;
        padding: 0 5px;
        width: 275px;
        -moz-box-sizing: content-box;
      }
      form input.valid {
        background: url('http://paweldecowski.github.com/jQuery-CreditCardValidator/tick.png') 260px center no-repeat;
      }
      .vertical {
        overflow: hidden;
      }
      .vertical div {
        float: left;
        width: 140px;
      }
      .vertical div .or {
        color: #aaa;
        float: left;
        font-size: 12px;
        margin-left: -8px;
        margin-top: 32px;
      }
      .vertical div:last-child {
        float: right;
        text-align: right;
      }
      .vertical div:last-child input {
        float: right;
      }
      .vertical input {
        width: 68px;
  </code></pre>
  
  <p>}</p>
  
  <p>I want to add another form</p>
  
  <pre><code>&lt;form&gt;
  Name: &lt;input type="text" name="name" id="name" value="" /&gt;
  Email: &lt;input type="text" name="email" id="email" value="" /&gt;
  Comments: &lt;textarea name="comments" id="comments" cols="25" rows="3"&gt;&lt;/textarea&gt;
  &lt;input type="submit" value="submit" /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>into the same html page,but should be a tabbed one.Tab1-has first form and tab2-has the second form..Im new to css , so i dont have any clue in implemeting this.I have created
  one form with a css,but I donno how i can integrate the second form into it.</p>