Tuesday, March 1, 2011

IE8 Slide Toggle Issue

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.

From stackoverflow
  • You could try this:

    $("h3 a").click(function(){
        id = $(this).attr("href");
        $('#' + id).slideToggle("slow");
    });
    
    jef2904 : The only problem is that i do this for multiple "h3 a" that point to different DIVs
    Sarfraz : @jef2904: see my answer, updated, i think that should do the trick. you were not adding the `#` in your selector.
    Nick Craver : @Sarfraz - His `href` has a `#` in it already, it's in the code he posted...and that wouldn't explain why *only* IE8 has the issue.
  • 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.

  • Remove this style from the h3 right before the gallery

    display: inline-block;
    

    that seems to fix the problem in IE8.

    jef2904 : Worked perfectly Thanks

0 comments:

Post a Comment