Comments on: jQuery slideToggle and Internet Explorer

By: Rom Saplaco

Rom Saplaco — Sat, 24 Sep 2011 15:21:36 +0000

if you absolutely have to use positioning (relative on your wrapper A and absolute on your targets B, C, D, etc), simply make the PARENT element of your wrapper A relatively positioned too.

found this after a day of pulling hair: http://www.beyondcoding.com/2009/02/26/jquery-slidedown-issues-in-ie-quick-fixes/

felt like i owed it to everyone out there to post it.

By: jQuery slideToggle error on IE6 | baby pink

jQuery slideToggle error on IE6 | *baby pink* — Fri, 09 Sep 2011 07:27:16 +0000

[...] read on this blog that “position” attribute on CSS could cause the error, but in my case neither [...]

By: Celbester

Celbester — Tue, 23 Aug 2011 07:28:31 +0000

Thank you so much. You saved me lots of time.

By: Seni Bana Yazmışlar

Seni Bana Yazmışlar — Fri, 22 Jul 2011 22:23:59 +0000

how bout if I use ul in my code ? I have a task of displaying a brand list. And if it is more than 10 brands to shows, than after 10 brands, it will only have a “more” links. The brands name are on each li element and the last li will be the “more” link. And so I put a display:none from the 11th brand till the last brand. And this flickering problem, does happen,,, could someone help me ?Wow, thank you so much for this. Sure enough, I had a position: relative on my divs. I was prepared to spend the next 3 hours trying to figure out why IE sucked, but I found this on google on my first shot! Thanks!!!

By: J. Millington

J. Millington — Wed, 08 Sep 2010 15:06:32 +0000

thank you so much for this post! i had a strange problem where my slideToggle function wasnt pushing down a certain div in IE6/7 … after removing the position:relative; declaration from my CSS, all was good.

THANK YOU THANK YOU THANK YOU.

By: Fiqi Fitransyah

Fiqi Fitransyah — Mon, 12 Jul 2010 10:27:31 +0000

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.