Question

I have a simple .slideToggle on my category headings on the website: http://www.UtahCodeCamp.com/Sessions/ :

// Slide Toggle the headers
$(".collapse-track").each(function () {
 $(this).click(function () {
  $(this).next().slideToggle();
 });
 $(this).css("cursor", "pointer");
 $(this).next().hide();
});

Everything works perfectly in FireFox and Chrome/Safari but in IE8 the parent div (with the yellow border in the bottom) will not resize. Then, if you expand all categoried and collapse them again the category titles sit right on top of each other.

Any ideas on how to fix this for IE8? I’m not as interested in compatability with IE6 or below, but I would like to support IE7/8.

Answer 1

The problem you are experiencing isn’t directly related to the jQuery slideToggle mehod. Instead it is due to one of your CSS rules. I used the developer toolbar to change the following:

.FloatLeft {
   width: 850px;
   /*display: inline-block;*/ /* This line was causing the problem */
}

I have not tested if this will effect Firefox or chrome though.