Search code examples
javascriptjqueryhtmlslidedown

jQuery slideDown not doing anything


I simply can't figure out what I'm doing wrong with this really simple slideDown jQuery function. It's supposed to animate the appearance of a div when another div is clicked. But, when I click the firing div, nothing happens. Where is my mistake here?

HTML

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#testdiv {background-color:#999900; height:100px; width:100px; display:none;}
</style>

<script src="/personal/xnb1159/Shared%20Documents/Test/jquery-1.11.1.js"></script>
<script>
$("#test").click(function() {
    $("#testdiv").slideDown("fast",function() {
        // Animation complete.
    });
});
</script>
</head>

<body>
<div id="test">Click me.</div>
<div id="testdiv"></div>
</body>
</html>

Solution

  • Wrap your jquery code in a document.ready so it runs when the elements are all loaded.

    $(function() {
      $("#test").click(function() {
        $("#testdiv").slideDown("fast",function() {
            // Animation complete.
        });
      });
    });
    

    Or add your JS scrip at the end of your body tag.