0

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;
});
tbrooks
  • 85
  • 1
  • 9
  • You're removing elements from the document flow, what do you expect? – adeneo Oct 26 '12 at 17:36
  • I dropped provided logic into a page and did not see a jump. Maybe if you provide the full markup or a link to the page it would help sort this out. – krg Oct 26 '12 at 17:36
  • Here's the full markup: https://gist.github.com/6b6cb6f7d44e6a3ebe54 – tbrooks Oct 26 '12 at 17:46

1 Answers1

0

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();
        });
testCoder
  • 7,155
  • 13
  • 56
  • 75
  • It's not clear what you're trying to accomplish with this. Could you walk me through your thoughts? – tbrooks Oct 26 '12 at 20:33
  • I paste your markup from github and notice that your page is jumps when when radio selected. That behavior occurs because your divs don't have a same height, you should set to divs equal height and your jumping go away – testCoder Oct 26 '12 at 21:05