Page Jumps on jQuery change();

Question

I'm using couple buttons to toggle divs. Whenever I click on the button, the page jumps.

Any ideas?

Here's my markup:

  <label class='radio btn'>
    <input checked='checked' id='donation_payment_type_eft' name='donation[payment_type]' type='radio' value='eft'>
    <span class='payment-type-echeck' style='background-position: -413px 0;'>ECheck</span>
  </label>
  <label class='radio btn'>
    <input id='donation_payment_type_cc' name='donation[payment_type]' type='radio' value='cc'>
    <ul class='card_logos'>
      <li class='card_visa'>Visa</li>
      <li class='card_mastercard'>Mastercard</li>
      <li class='card_amex'>American Express</li>
      <li class='card_discover'>Discover</li>
    </ul>
  </label>

and my jQuery:

$('#donation_payment_type_eft, #donation_payment_type_cc').change(function(e) {    
 $('.eft_donation').toggle();
 $('.cc_donation').toggle();
 e.preventDefault();
 return false;
});

Answer 1

Try to do that steps:

1. remove display:none in div that have class cc_donation
2. calculate max height value and specify for divs that calculated value like this:

_

$(function(){
            var eft_height = $(".eft_donation").height();
            var cc_height = $(".cc_donation").height();
            var max = Math.max(eft_height, cc_height);
            $(".eft_donation, .cc_donation").height(max);
            $(".cc_donation").hide();
        });