jQuery slideDown, not working on links

Question

EDIT : I was missing }); at the end, thanks to Petr for hinting me the mistake

I have the following HTML code:

 <a href='#' class='button_flat'> Why Choose Us </a>
<div class='whyus'> Lorem Ipsum </div>

And this is my jQuery

$(document).ready(function(){
            $(".button_flat").click(function(){
            $(".whyus").slideDown();
            });

CSS

.button_flat {
        border:0px;
        background: #34495e;
        color: white;
        padding-top:10px;
        padding-bottom:10px;
        text-decoration:none;
        padding-left:15px;
        padding-right:15px;
    }
    .whyus {

        display:none;

    }

I dont know why the code is not working. I would appreciate if someone could help me.

Answer 1

You forgot to close $(document).ready , add }); to the end of the script and it'll work just fine:

$(document).ready(function () {
    $(".button_flat").click(function () {
        $(".whyus").slideDown();
    });
});

jsFiddle here

Answer 2

Try

<a href='#' class='button_flat'> Why Choose Us </a>
 <div class='whyus' style="display:none;"> Lorem Ipsum </div>

$(document).ready(function () {
$(".button_flat").click(function () {
    $(".whyus").slideDown();
 });
});

Demo

Answer 3

Because you forgot }); at the end of jquery. I recommend using toggle , so when you have the .whyus div displayed, clicking again on button will slide it up.

LIVE DEMO

$(document).ready(function(){
  $(".button_flat").click(function(){
    $(".whyus").toggle("slow");
  });
});

Answer 4

You should return false; anchor click event to prevent it from opening link that's in href="#". And before .slideDown(duration); animation must stop and hide then animate it again.

Html:

 <a href='#' class='button_flat'> Why Choose Us </a>
 <div class='whyus'> Lorem Ipsum </div>

Js:

$(document).ready(function () {
  $(".button_flat").click(function () {
     $(".whyus").stop().hide().slideDown();
     return false;
  });
});

Css:

.button_flat {
  border:0px;
  background: #34495e;
  color: white;
  padding-top:10px;
  padding-bottom:10px;
  text-decoration:none;
  padding-left:15px;
  padding-right:15px;
}
.whyus {
  display:none;
}

Answer 5

Here is the edited code. The postion of anchor tag is fixed and the dropdown remain hidden at page load.

<a href='#' class='button_flat'> Why Choose Us </a>
<br><br>
<div class='whyus'> Lorem Ipsum </div>

css

.button_flat {
        border:0px;
        background: #34495e;
        color: white;
        padding-top:10px;
        padding-bottom:10px;
        text-decoration:none;
        padding-left:15px;
        padding-right:15px;
        position:fixed;
    }
    .whyus {

        display:none;

    }

jquery

$(document).ready(function(){
     $(".whyus").hide();
  $(".button_flat").click(function(){
    $(".whyus").toggle("slow");
  });
});

Demo Hope this helps

Thank you

Answer 6

Add event.preventDefault(); at the end of click listener function, to stop default click behavior continued by browser.

$(document).ready(function(){
    $(".button_flat").click(function(){
      $(".whyus").slideDown();
      event.preventDefault();
    });
});

Answer 7

Add event.preventDefault();

$(document).ready(function(event){
$(".button_flat").click(function(){
  $(".whyus").slideDown();
  event.preventDefault();
});

});