Click only works once with top property

[Paul_H]

I have three divs and i want to do is this: when you click on “up” or “down”, the three divs moves at the same time respectively. In my code, this only works once, but i want that three divs move (up or down) each time you click on the words. I tried with other properties (like height, width, font-size in text) and i works perfectly, but i dont know why is not working whit the top and bottom properties.

Edit fiddle - JSFiddle - Code Playground

[WolfShade]

You’re setting the top or bottom to a fixed value. Every click of “up” fixes the bottom to 100px. If it’s already there, it doesn’t move.

HTH,

[Paul_H]

Yeah, but i read that’s the only form that properties works in jQuery. I tried to use .css(“top”,“100”) or .css(“top”,“+=100”) and it didn’t work.

[Paul_Wilkins]

@Paul_H

I tried to use .css(“top”,“100”) or .css(“top”,“+=100”) and it didn’t work.

The += technique only works when there’s a value already there. This is from the jQuery .css() documentation page.

Note: If nothing is returned in the setter function (ie. function( index, style ){} ), or if undefined is returned, the current value is not changed.

So, ensure that there is first a value there.

$("div").css("top", "0px");
$("div").css("bottom", "0px");

Now that you have something there, you can modify it.

$(".down").on("click", function(){
    $("div").css("top","+=100");
});

When you want to move in the other direction, don’t adjust the bottom value. Instead, affect the top value by a negative amount.

$(".up").on("click", function(){
    $("div").css("top","-=100");
});