Databases
StackOverflow2013
Postsdbo
POjQuery .slideUp() .slideToggle() in internet explorer produces the reverse effects of what was expected
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery .slideUp() .slideToggle() in internet explorer produces the reverse effects of what was expected
    text
    copied!<p>I am using the .slideUp() and .slideToggle to show and hide two divs based on the value selected in a radio button collection.</p> <p>It works fine in Firefox, Safari and Chrome, but internet explorer is producing the reverse effect than what I was expecting.</p> <p>Here is my Javascript</p> <pre><code> function TogglePaypal() { $("#bank").slideUp(250, function() { $("#paypal").slideToggle(); }); } function ToggleBank() { $("#paypal").slideUp(250, function() { $("#bank").slideToggle(); }); } </code></pre> <p>And here is what I am doing in my HTML,</p> <pre><code> &lt;%=Html.RadioButton("PaymentMethod", "PayPal", true, new { onchange = "TogglePaypal();" })%&gt; &lt;label class="payment-radio"&gt;PayPal&lt;/label&gt; &lt;%=Html.RadioButton("PaymentMethod", "Bank Account", false, new { onchange = "ToggleBank();" })%&gt; &lt;label class="payment-radio"&gt;Bank Account&lt;/label&gt; &lt;div id='paypal'&gt;&lt;/div&gt; &lt;div id='bank' style="display: none"&gt; &lt;/div&gt; </code></pre> <p>What I am expecting (and what is infact happening in firefox, chrome and safari) is that the paypal radio button is initially checked and the paypal div is displayed, when the bank radio button is selected the paypal div slides up and the bank div slides down (and vice versa).</p> <p>What is happening in internet explorer is, the paypal button is initially selected, and the paypal div is displayed, but when i select the bank radio button, nothing happens, then when i click back to the paypal button, the paypal div slides up and the bank div slides down, and from there on I get the opposite div displayed to what is selected.</p> <p>Why would internet explorer be producing different results to the other main browsers?</p> <p>Any ideas would be greatly appreciated.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload