Question

So, I’ve been studying jQuery lately and I saw some tutorials and it appears to be it doesn’t work. So here what I wan to do..

Whenever I clicked #search_top, I want my #container css attribute, top, to be 60px else 0px.

Below is what I use.

$("#search_top").click(function() {
    if($("#container").top() == 60) {
        $("#container").animate({top:"0px"}, 1000);
    } else {
        $("#container").animate({top:"60px"}, 1000);
    }
});

Thanks in advance. 🙂 Hope this question is very clear to you.

Answer 1

Your issue is that .top() does not exist. You can use .offset().top instead.

jquery offset() and jquery position()

offset() – Get the current coordinates of the first element in the set of matched
elements, relative to the document.

position() – Get the current coordinates of the first element in the set of matched
elements, relative to the offset parent.

$("#search_top").click(function() {
    if($("#container").offset().top == 60) {
        $("#container").animate({top:"0px"}, 1000);
    } else {
        $("#container").animate({top:"60px"}, 1000);
    }
});

Live Demo