jQuery reverse animation on click

Question

Looked through a few of the existing questions and they helped me get this far, but still cannot get it working.

$('#languageSelctor').click(function()
{
    $('#languageList').toggle(function()
    {
        $(this).animate({"top": "20px"},500);
    },  function() 
    {
        $(this).animate({"top": "-100px"},500);
    });
});

Managed to put together the above code, but now it just does not work. So when someone clicks on languageSelctor, languageList needs to appear and then disappear if they click on languageList again.

Answer 1

$('#languageSelctor').click(function() {
    var $language = $('#languageList'),
        top = $language.css('top') === '-100px' ? '20px' : '-100px';
    $language.stop().animate({top: top}, 500);  
});

Answer 2

You can simply use this to hide and show the content.

$('#languageSelctor').click(function()
{
    $('#languageList').toggle();
});

$('#languageList').click(function()
{
    $(this).hide();
});

.toggle()