IE8 Slide Toggle Issue

Question

Im having some trouble with jQuery's slideToggle function in IE8 for some reason the DIV its opening closes immediately after its opened

heres the code im using

$("h3 a").click(function(){
    id = $(this).attr("href");      
    $(id).slideToggle("slow");
});

and the HTML

<h3><a href="#promo-materials">Graphic and Pormotional Materials</a></h3>
    <div id="promo-materials" class="center gallery">
        <a href="images/portfolio/bistro.png" rel="facebox">
            <img src="images/portfolio/thumbs/bistro.png" alt="" />
        </a>
        <a href="images/portfolio/direct-savings.png" rel="facebox">
            <img src="images/portfolio/thumbs/direct-savings.png" alt="" />
        </a>
     </div>

Here is a link to the functional page it works in all other browsers including IE7

I forgot to post it:

http://bestprintideas.com

I currently have it triggering Compatiblity Mode since I had to get to work today.

Answer 1

Remove this style from the h3 right before the gallery

display: inline-block;

that seems to fix the problem in IE8.

Answer 2

I am betting Nick's comment about it being fired twice is the answer. I copied your code above and it works great for me in IE8.

Answer 3

You could try this:

$("h3 a").click(function(){
    id = $(this).attr("href");
    $('#' + id).slideToggle("slow");
});