JQuery toggle plus/minus button icon and animate image on click
<p>I have a div containing list items, a photo, and a plus/minus icon at the bottom of the div.</p>

<p>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. </p>

<p>I'm trying to accomplish something very similar to what you see on <a href="http://blog.kyanmedia.com/archives/2008/12/10/easy_image_rollovers/" rel="nofollow">Kyanmedia.com</a>. 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.</p>

<pre><code>$(document).ready(function() {
  $('#btn_switch').click(function () {

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

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

    });
});
</code></pre>
