jQuery slideToggle: Hiccups after sliding up in IE 8

Question

I am using the jQuery slideToggle() function to show and hide a span. Here is my code:

$(".slideButton")
  .click(function(event) {
    $(".slideText").slideToggle("slow");
    event.preventDefault();
  });

<span class="slideText" style="display:none">
   blah...blah...blah
</span>
<a href="" class="slideButton">more...</a>

It works the way I would expect on opening, but when closing, the span slides closed, then quickly flashes all the text in the span, and finally disappears. Almost like it has a hiccup.

I have this issue in IE 8, but not Firefox.

Anyone know to resolve this? Thanks.

Answer 1

Maybe give this a try...

http://stackoverflow.com/questions/1902478/jquery-slidetoggle-problem-in-ie8-only-using-lists

Answer 2

OK, it appears to have something to do with the CSS line-height that is defined in the body tag. When I clear the line-height property it appears to fix the issue.

However, since I was running into so much trouble with this, I took another approach and I am now using the jQuery Expander Plugin.

Update 08/06/10: I dropped the JQuery Expander Plugin. I was using it to collapse/expand text in a large table. If the table exceeded so many rows, the performance degraded to an unacceptable level. That's not to say that this isn't a good plugin, but it wasn't good for my needs.