StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POtrying to make a div slide down and up from top of page using - top positioning and jquery animate upon click
text
Body
copied!<p>basically when a user clicks the .selector element the div .dropDown should slide up -100px and when they click again it should slide down to top: 0px.</p> <pre><code>$(document).ready(function(){ var orig = $(".dropDown").outerHeight(); // 104 var top = $(".dropDown").css("top"); if(top == "0px"){ $(".selector").on("click", function(e){ $(".dropDown").animate({top : "-100px"}, 400, function(){ var top = $(".dropDown").css("top"); alert(top); }) }) } // else{ // $(".selector").on("click", function(e){ // $(".dropDown").animate({top : "0px"}, 400); // $("body").css({"background-color" : "green"}) // }) // } if($(".dropDown").css("top") == "-100px"){ $(".selector").on("click", function(e){ $(".dropDown").animate({top : "0px"}, 400); $("body").css({"background-color" : "green"}) }) } }); </code></pre> <p>logic: if the dropDown div's top position is zero that means that the div is open(visible). when the user clicks the button to hide the dropDown div the div goes to -100px(hidden). then if the user wants to see the div again they click the button and the div goes back down to top: 0. </p> <p>Im having problem when the top is at -100px and when i click the button the dropdown doesnt slide down. please help with that. Thanks.</p> <p>while I was setting up the <a href="http://jsfiddle.net/XUwN5/" rel="nofollow">jsfiddle</a> I realised that what I have so far works in FF but not in chrome. that is weird to me, if you can help me solve that problem too that would be also great.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload