Question

I’ve got this bit of css/javascript/html that uses jQuery 1.5 and jQuery-ui 1.8.9. It’s a fairly basic view. A top panel of metadata that pertains to the stuff in a lower div. The top panel opens and closes using the “blind” effect.

Here is the code snippet: jsfiddle example

Everything works fine on Chrome & firefox. On IE it doesn’t “blind” open…it just toggles to visible. When closing it, it blinds closed but then the entire page flashes once.

I don’t know why this happens. I can find no references to such behavior in my searches. It’s possible my Google-fu is weak today.

Anyone have any ideas on how to make it play nice in IE? Unfortunately I can’t mandate that we don’t support I.E.

Answer 1

Remove the position: relative attribute from ‘.toggle-handle’ in the CSS. Seems to solve things for me.

Incidentally, you can hide the #hideable-content div in CSS and simplify your JavaScript code to the following:

$(function() {
    // set effect from select menu value
    $("#toggle-handle").click(function() {
        $("#hideable-content").slideToggle(500);
        return false;
    });
});

http://jsfiddle.net/CTxB7/11/