Question

I have the code below which when a list item is clicked an animation occurs.

What I’m having trouble with is making the list item when clicked again reverse the animation effect.

I’m trying to store the clicked list item in a variable but having trouble with this as my variable never stores the elements details?

There may be a better way of doing this but any help or advice would be great?

 <ul class="circles">
     <li class="c-1"><div class="c-1-active">Text Link</div></li>
     <li class="c-2"><div class="c-1-active">Text Link</div></li>
     <li class="c-3"><div class="c-1-active">Text Link</div></li>
  </ul>



$('#home ul.circles li').click(function() {
    alert(testing);
    if(testing > "" || testing == $(this).find('div'))
    {
        testing.animate({opacity: 0, top:'180px'}, 1000 );
    }
        $(this).find('div').animate({opacity: 0.8, top:'0'}, 1000 );
        var testing = $(this).find('div');

});

Answer 1

You want toggle function:

$('#home ul.circles li').toggle(function() {
    $(this).find('div').stop().animate({opacity: 0, top:'180px'}, 1000 );
},function() {
    $(this).find('div').stop().animate({opacity: 0.8, top:'0'}, 1000 )
});

UPDATE: According to your comment, this solution should be more preferable:

$('#home ul.circles li').click((function(){
    var prevElement = null;
    return function(){            
        //Hiding previously active element
        prevElement && $(prevElement).stop().animate({opacity: 0, top:'180px'}, 1000);

        var curElement = $(this).find('div').get(0);
        $(curElement).stop().animate({opacity: 0.8, top:'0'}, 1000);
        prevElement = curElement;
    };
})());