CODEWITHSUNDEEP
javascripthtml
Ajeesh
Ajeesh

Reputation: 5860

Why both the forms are shown

http://jsfiddle.net/pz83w/16/

check the fiddle.I have two forms in it.I have a java script for forming a slide transitin between the forms.At first when the page loads,the both forms are shown,but i want only one form shown.Later when I click the links its working fine.How can I correct this.

<div class="demo">

    <form class='form show' id="formA">

<a href="#formA" class="tabHeader">Card Payment</a>
<a href="#formB" class="tabHeader">Internet banking</a>

 <h2>Card Payment</h2>

        <input type='hidden' id='ccType' name='ccType' />
        <ul class="cards">
            <li class="visa">Visa</li>
            <li class="visa_electron">Visa Electron</li>
            <li class="mastercard">MasterCard</li>
            <li class="maestro">Maestro</li>
        </ul>
        <label for="card_number">Card number</label>
        <input type="text" name="card_number" id="card_number">
        <div class="vertical">
            <label for="expiry_date">Expiry date <small>mm/yy</small>

            </label>
            <input type="text" name="expiry_date" id="expiry_date" maxlength="5">
            <label for="cvv">CVV</label>
            <input type="text" name="cvv" id="cvv" maxlength="3">
        </div>
        <div class="vertical maestro">
            <label for="issue_date">Issue date <small>mm/yy</small>

            </label>
            <input type="text" name="issue_date" id="issue_date" maxlength="5"> <span class="or">or</span>

            <label for="issue_number">Issue number</label>
            <input type="text" name="issue_number" id="issue_number" maxlength="2">
        </div>
        <label for="name_on_card">Name On card</label>
        <input type="text" name="name_on_card" id="name_on_card">
        <input type="submit" value="Pay Now !">
    </form>
    <form class='form' id="formB">
<div id="internet">     
<a href="#formA" class="tabHeader">Card Payment</a>
<a href="#formB" class="tabHeader">Internet banking</a>

 <h2>Internet Banking</h2>

    <ul class="cards">
            <li class="visa">Visa</li>
            <li class="visa_electron">Visa Electron</li>
            <li class="mastercard">MasterCard</li>
            <li class="maestro">Maestro</li>
        </ul>

    </form>
</div>

and javascript is

$(document).ready(function(){
  $(".tabHeader").click(function(){
      $(".form").each(function(){
          if ($(this).hasClass('show')) {
              $(this).slideUp(900).removeClass('show');
          } else {
              $(this).delay(900).addClass('show').slideDown();
          }
      });
  });
});

Upvotes: 1

Views: 72

Answers (5)

SsNewbie
SsNewbie

Reputation: 265

Well, You can add either of the following css properties.

"display: none" or "visibility:hidden"

display:none means that there will be no space allocated for it. visibility:hidden means that the tag is not visible, but space is allocated for it on that particular page.

$("#formB").css("visibility","hidden");

Add this when when you show the page and then make it visible when you want second form to appear when you click on link, 

$("#formB").css("visibility","visible");

Upvotes: 0

Brandon
Brandon

Reputation: 10058

In HTML and CSS, everything is visible unless you specifically ask it not to be.

Your showing and hiding is embedded within an onclick handler, so it won't execute until the links are clicked.

Until the links are clicked, why would a form be hidden? There is nothing to hide them.

You could of course have display: none set in in a stylesheet, but you did not include any CSS, so I assume there is none.

Try putting style="display: none" on the form tag you want to initially hide, like so:

<form class='form' id="formB" style="display: none">

Upvotes: 1

Mike Vranckx
Mike Vranckx

Reputation: 5577

You could hide the second form in javascript like this:

$(".form").not(':first').hide();

Or an update of the Jsfiddle: http://jsfiddle.net/pz83w/18/

Upvotes: 2

Warlock
Warlock

Reputation: 7481

Update CSS to hide forms without show class

Upvotes: 1

Qpirate
Qpirate

Reputation: 2078

By default you could use style="display:none" on the form you don't want shown.

Sorry for the bad format sent from my phone.

Upvotes: 1

Related Questions