Jquery slideToggle problem in IE8 only using lists

Question

Hello everyone, I am quite new to Jquery and for the first time tried to use slideToggle to create some dropdowns. A few of them are stacked on top of each other and when one is clicked, all others should collapse. I am sure my code isn't ideal since i'm just starting out, but everything works fine except in IE8. In IE8, the space between the dropdowns collapse when closing one, and everything gets kind of messed up. You can see the problem at demo.djcase.com using the menus on the left side of the page.

All of the jquery code is located at http://demo.djcase.com/sites/all/themes/djcase/script.js

Any help would be appreciated. Thanks. Brian

Answer 1

I think i have it fixed now. I was using the following HTML

<div class="services_menu" ><p>Services</p></div>
<ul class="services-menu">
  <li><a href="/services/communications-marketing-and-public-relations">Communications, Marketing and Public Relations</a></li>
  <li><a href="/services/web-development">Web Development</a></li>
  <li><a href="/services/interpretation-and-conservation-education">Interpretation and Conservation Education</a></li>
  <li><a href="/services/human-dimensions-market-research-and-evaluation">Human Dimensions, Market Research and Evaluation</a></li>
  <li><a href="/services/facilitation-strategic-planning-and-public-involvement">Facilitation, Strategic Planning and Public Involvement</a></li>
  <li><a href="/services/graphic-design">Graphic Design</a></li>
  <li><a href="/services/video-and-multimedia-production">Video and Multimedia Production</a></li>
  <li><a href="/services/event-planning-and-management">Event Planning and Management</a></li>
  <li><a href="/services/training">Training</a></li>
</ul>

I added the following between the closing Div and the start of the list

<p class="fixInIe">&nbsp;</p>

I styled this to have a line height of 0 so i wouldn't get the extra space. I don't know why this was needed, but it worked.