Search code examples
jquerycssinternet-explorerslidetoggleslideup

SlideUp() causes vanish of an element (in IE10)


Similar question link here, since no one has anwsered it and due to it's complexity, I am making a new and more specific one.

Criteria:

When a button gets clicked, I used SlideUp() to hide a corresponding div section, and use SlideDown() to display it again. however, it works all fine in Chrome and Firefox, but not in IE10. The button vanishes after SlideUp().

Demo code in JSFiddle (NB: Demo only shows the code I am using and works fine anywhere, but in my local environment, same code will vanish the button when slideUp get triggered IN IE10)


Solution

  • Based on "Additional notes" of SlideUp():

    If .slideDown() is called on an unordered list ul and its li elements have position (relative, absolute, or fixed), the effect may not work properly in IE6 through at least IE9 unless the ul has "layout." To remedy the problem, add the position: relative; and zoom: 1; CSS declarations to the ul.

    My case isn't relevant to TAG ul and li, but when I add css property: zoom: 1 it works in IE8, IE9, IE10 now.