jQuery slideDown/slideUp issue

Question

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>   

Answer 1

$("#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:

• preventDefault()

• fadeToggle()

• slideToggle()

Answer 2

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();
});