Essentially, when a user interacts with the .selector element, the div .dropDown should smoothly slide up -100px. Upon clicking again, it should then slide back down to top: 0px.
$(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"})
})
}
});
The concept behind this script is that if the dropDown div's top position is set to zero, it indicates that the div is currently open and visible. When the user triggers the button to hide the dropDown div, the div shifts up to -100px, effectively hiding it. Subsequently, if the user wishes to reveal the div once more, they can click the button again, causing the div to slide back down to its original position at top: 0.
I'm encountering an issue where, when the top value is -100px, clicking the button doesn't trigger the dropdown to slide back down. Any assistance in resolving this matter would be greatly appreciated. Thank you.
Upon setting up the jsfiddle, I noticed that the current solution works correctly in Firefox but encounters difficulty in Chrome browser. It's puzzling to me why there is this discrepancy between browsers. If you could offer guidance on rectifying this compatibility issue as well, it would be immensely helpful.