jQuery slideDown() produces no effect

Question

I'm trying to use jQuery to create a recursion demo, but so far I haven't gotten any effects to work. I want div1 to slide down when clicked. The div is set to position:relative; and display:inline-block but it still doesn't slide down when clicked. However, the console does log that it's clicked--it just never actually slides.

Can someone explain what's going on here?

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Basic Recursion</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>$(document).ready(function(){
$( "#div1" ).click(function() {
    console.log("clicked");
      $( "#div1" ).slideDown( "slow", function() {
        // Animation complete.
            console.log("slideDown");
      });
    });
});</script>
</head>

<body>
<div id="container">
<div id="content">
<h1>Tail Recursion</h1>
<div id="div1" class="red"></div>
<div id="div2" class="blue"></div>
<div id="div3" class="red"></div>
<div id="div4" class="blue"></div>
<div id="div5" class="blue"></div>
<div id="div6" class="red"></div>
</div>
</div>
</body>
</html>

CSS

@CHARSET "UTF-8";

html,body {
    width: 99%;
    height: 99%;
}

#container {
    display: inline;
    position: absolute;
    width: 70%;
    left: 14.5%;
    min-height: 50%; border : 1px solid;
    padding: 1%;
    border: 1px solid;
}

#content {
    position: relative;
    width: 68%;
    display: inline;
    float: left;
    border: 1px solid;
    height: 700px;
}

.red {
    position: relative; 
    width : 80px;
    height: 80px;
    background-color: red;
    display: inline-block;
}

.blue {
    position: relative; 
    width : 80px;
    height: 80px;
    background-color: blue;
    display: inline-block;
}

But your element is already visible/displayed. Do you mean `slideUp()` instead? — A. Wolff, Oct 22 '14 at 21:38
Do you really understand what slideDown() do? It changes element height from 0 to its normal height. At the same time changes display:none to display:block. You won't see anything applying slideDown to visible (not display:none;) elements — Anarion, Oct 22 '14 at 21:39
`
` is sign of poor ID's and CLASSES understanding. Use i.e: `.clickable` for all your elements instead and inside the function refer to the `this clicked element` using `$(this)` — Roko C. Buljan, Oct 22 '14 at 21:40
You're right, I misunderstood what slideDown() does. I was confused because I tried animate({down:300px}) as well and it did not work. I've changed the inside function to use `this` but I'm confused about why I would change the css to `.clickable`. I ultimately want the red and blue squares to have different behaviors, which is why I made them different classes. What am I missing here? — Reggie, Oct 23 '14 at 16:39

score 1 · Accepted Answer · answered Oct 22 '14 at 21:44

The problem is that .slideDown() is meant to reveal an element that's currently not visible. In your case the element is visible, so there's no work to be done.

If you hide by default, .slideDown() will reveal it.

<p id="showDiv1">Show Div 1</p>
<div id="div1" class="red" style="display: none;"></div>
<br style="clear:both;">

<script type="text/javascript">
$(document).ready(function(){
    $( "#showDiv1" ).click(function() {
        console.log("showDiv1 clicked");
        $( "#div1" ).slideDown( "slow", function() {
            // Animation complete.
            console.log("showDiv1 slideDown complete");
        });
    });
});

See fiddle here: http://jsfiddle.net/grLnzyjn/

jQuery slideDown() produces no effect

1 Answers1