Simple ternary operation is not working

Question

I am attempting to make a div change position on click and then revert to it's original position when clicked again. I cannot for the life of me figure out what the problem is.

$("#bottom").click(function() {

  var $about = $('#bottom'),
  top = $about.css('top') === '50%' ? '90%' : '50%';

$about.stop().animate({top: top}, 500);  
});

my css is:

#bottom {
top: 90%;
left: 0; right: 0;
height: 100%;
}

When I click #bottom, the div positions itself at 50%, but when I hit it again, nothing happens.

Answer 1

.css('top') doesn't give you the literal CSS top declaration; it gives you the calculated pixel amount of the top. If your container for #bottom is 100px tall, then $('#bottom').css('top') will give you 90px , not 90% .

Here's a fiddle with a solution for you.