CODEWITHSUNDEEP
jqueryhtmlcssslidedown
user1113534
user1113534

Reputation:

jQuery slideDown/slideUp issue

I can't get the jQuery slideDown effect to work. I'm trying to get a panel to show by sliding down. Instead it just shows like the show() method but in Firefox it doesn't even show.

jQuery:

$("#linkHBE").click(function(){
    if ($(".panel").is(":hidden")) {
        $(".panel").show("slow");
    } 
    else 
        $(".panel").hide("slow");
});

The HTML:

 <div class="panel"></div>

 <ul id="grid">
      <li class="web"><a id="linkHBE"><img  width="296px" height="196px"></a></li>
      <li class="graphic"><img width="296px" height="196px"></li>
      <li class="web"><img width="296px" height="196px"></li>
 </ul>

Upvotes: 0

Views: 239

Answers (2)

thecodeparadox
thecodeparadox

Reputation: 87073

$("#linkHBE").click(function(e) {
    e.preventDefault();
    $('.panel').toggle(1000); // fadeToggle() or slideToggle() are also available
});

DEMO

Here, e.preventDefault() is for prevent the page reload to click on anchor tag. jQuery .toggle() will do show-hide for you. So, no additional checking needed.

Related refs:

Upvotes: 2

jeff
jeff

Reputation: 8338

The reason your code is not working is because your handler isn't cancelling the default event, so the browser is following the link. Try this:

$("#linkHBE").click(function(e){
    $(".panel").slideToggle("slow");
    e.preventDefault();
});

Upvotes: 0

Related Questions