Comments on: jQuery slideToggle and Internet Explorer

By: Rob

Rob — Wed, 17 Feb 2010 21:50:16 +0000

I’m using slideToggle to generate an accordion-like menu. My problem was that IE7 was ignoring the height of the slideToggled element. The net result was that absolutely positioned child elements were getting stretched to the height of the viewport.

After trying a bunch of CSS tricks (including those enumerated above) I ended up writing a couple of jQuery functions that calculate the height of the accordion blocks in question based on their content (whether open or closed) and assign hard pixel heights to them on the fly. This seems to have corrected IE7’s aberrant behavior (thank God!).

By: Bryan Blakey

Bryan Blakey — Wed, 27 Jan 2010 00:37:50 +0000

I needed to use absolute positioning for one of the nested elements in my div that gets slideToggle’d. So I tried the “height: 101%” hack, but that made the sliding div expand to greater than its content, then snap back to the correct size at the end of the animation. The real issue seems to be that the sliding div needs to have the ever elusive “hasLayout” property triggered in IE. Giving it a “min-height: 1%” worked the best for me without other random oddities cropping up. Hopefully that helps anyone who hasn’t yet figured it out!

By: Kevin

Kevin — Thu, 19 Nov 2009 22:28:50 +0000

ahhh yes, only problem is working with radio and checkbox elements within forms – your can’t really do much with float…. thanbsk for replying though…….

By: Niall Doherty

Niall Doherty — Thu, 19 Nov 2009 21:18:08 +0000

Kevin, thanks for the comment. It might not be an ideal workaround, but it’s the only one I’m aware of. By all means, using something other than slideToggle if you prefer.

Also, if you’re using absolute position for everything, you’re doing something wrong. Floats are usually a better way to go.

By: Kevin

Kevin — Thu, 19 Nov 2009 15:23:16 +0000

Positioning? Just rip it out of there ? Let’s just get rid of all tags too…. This is a ridiculous workaround as absolute positioning is a must have when working with like, anything……. point is – slideToggle sucks. putting in a workaround, that hacks child elements is sinful….. this is not a workaround.

By: GreenAlgae

GreenAlgae — Wed, 17 Jun 2009 10:07:52 +0000

Good post, there seems to be a bug with slideToggle + IE + positioned elements. One can either use the 101% height or toggle instead of slideToggle.

By: Tobin Lehman

Tobin Lehman — Thu, 30 Apr 2009 19:53:00 +0000

Just as an addition to this post, I’ve found that slideToggle + IE + Table elements do not prove to be smooth as well. It will toggle, but in a purely on/closed format. I had to wrap it in divs to get the nice transition. Probably because of the nested elements, but it works fine in everything else (FF+ Safari).

By: srss

srss — Sat, 04 Apr 2009 13:14:48 +0000

Thanks! The “height:101%” fixed my adsense on IE moving to the left and jumping around!

IE needs to be made illegal.

By: Joulss

Joulss — Thu, 19 Mar 2009 16:48:08 +0000

Some precisions : in my case the problem is with slideUp() or slideDown() on a div containing an image, and only under ie6. The animation is smooth but the image simply disapears at the end of the slide !

By: Joulss

Joulss — Thu, 19 Mar 2009 16:44:14 +0000

The no-position tweak works but I the position:relative was mandatory in my case, so the 101% tweak was the good one.
Thank you so much for this, ie was driving me crazy !