Question

I have a div containing list items, a photo, and a plus/minus icon at the bottom of the div.

The list items are absolutely positioned behind the photo. When I click on the plus button I want it to change to minus and animate the photo 29px from the top revealing the list-items behind it. Then I want to click the minus button changing it back to plus and animate the photo back up to the top.

I’m trying to accomplish something very similar to what you see on Kyanmedia.com. Except their images animate down and up on hover. I want my image to animate down then up on click and toggle the plus/minus image. I’ve tried this but it doesn’t work.

$(document).ready(function() {
  $('#btn_switch').click(function () {

        $(this).addClass('on')
        $('.photo').animate({ top: '29px'}, 500);

        }, function() {
        $(this).removeClass('on')
        $('.photo').animate({ top: '0px'}, 500);

    });
});

Answer 1

You should use “toggle” instead of click():

$(document).ready(function() { $('#btn_switch').toggle(
    function () { /*show*/ },
    function () { /*hide*/ }
);});

http://api.jquery.com/toggle-event/