jQuery .slideUp() .slideToggle() in internet explorer produces the reverse effects of what was expected.

Question

I am using the .slideUp() and .slideToggle to show and hide two divs based on the value selected in a radio button collection.

It works fine in Firefox, Safari and Chrome, but internet explorer is producing the reverse effect than what I was expecting.

Here is my Javascript

    function TogglePaypal() {
        $("#bank").slideUp(250, function() {
            $("#paypal").slideToggle();
        });
    }
    function ToggleBank() {
        $("#paypal").slideUp(250, function() {
            $("#bank").slideToggle();
        });
    }

And here is what I am doing in my HTML,

 <%=Html.RadioButton("PaymentMethod", "PayPal", true, new { onchange = "TogglePaypal();" })%>

<label class="payment-radio">PayPal</label>

<%=Html.RadioButton("PaymentMethod", "Bank Account", false, new { onchange = "ToggleBank();" })%>

<label class="payment-radio">Bank Account</label>

<div id='paypal'></div>
<div id='bank' style="display: none"> </div>

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).

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.

Why would internet explorer be producing different results to the other main browsers?

Any ideas would be greatly appreciated.

Answer 1

Ok, I managed to sort it out by changing all my slide calls to .slideToggle();

    function ToggleBank() {
        $("#paypal").slideToggle();
        $("#bank").slideToggle();
    }

Answer 2

I think it's because IE doesn't register the Change event on radio buttons until AFTER focus moves away from it. (i.e., when you click back on Paypal button, THEN it registers the change event for the Bank option because it lost focus).

Often people will use the Click event instead of Change for checkboxes/radio buttons because of this behavior difference.