jQuery slideToggle() Internet Explorer problem and jumpy animation

Question

Hey yaa!

I have a big problem with my jquery. I finally made it that my slidetoggle runs in firefox. The animation is a little bit jumpy in the end of the animation. I read a lot of workarounds, but somehow nothing helped me really. Perhaps anyone of you can rescue me out of this dilemma.

The other bigger problem is that the hidden divs are unfortunately shown directly on start in internet explorer. I tested it in IE6&7. And the sliding effect is also very strange.

Does anyone of you know if I have to give additional styling for IE???

Here is my site I am working on:

http://www.haus-plan.de/%5F01%5FHausplan/

the red titles are slideable in the content area and the two Slide words on the right panel.

I noticed that Internet Explorer runs the first Slide word on the right panel correctly. Here its div is first hidden and only shows up when we click and let it slide down. But for the other divs they are shown in the beginning which is very sh.....

Please help meee....

Answer 1

To keep the divs hidden on load, try setting the 'd_show _hide' class to "display:none", then put this on your DOM ready:

$('.d_show_hide').show();

The CSS will load with the style set to not display, then, when the DOM is ready, it will show your div. You can put this after your "slideToggle" method call.

You can also try loading the 'd_show _hide' div on window ready instead of DOM ready; this will give the ensure that the elements inside of it are ready to be used before calling the method.

$(window).load(function(){
   //slide toggle here
}

Answer 2

Try to remove the Position:relative from teh CSS and this will fix it.