jQuery with hide and show

Question

I dont get how to tell my function that if i click again on the open tabs, close and stop animation. My problem right now is my tab close, and redo to .show() action. Here a fiddle for you to see; http://jsfiddle.net/X2dsS/1/

$('.lst-cours .extrainfo').hide()
$('.lst-cours').click(function(){
    $('.lst-cours .extrainfo').hide("slow")
    $('.lst-cours .extrainfo').removeClass("active")
    $(this).children().find('.extrainfo').show("slow").addClass('active')
});

Answer 1

So, all in all, you need to add an if statement to check the class, but you need to do this before you do any hiding and showing. Then save that value. The following is the code that works well, including an extra stop command that will prevent the nimation from repeating over and over.

$('.lst-cours').click(function(){
    var clickElement = $(this).children().find('.extrainfo');
    var hideOnly = clickElement.hasClass("active");

    $('.lst-cours .extrainfo').stop();
    $('.lst-cours .extrainfo.active').hide("slow");
    $('.lst-cours .extrainfo.active').removeClass("active");        

    if (!hideOnly){
        clickElement.show("slow").addClass('active');
    }
});

See the fiddle: http://jsfiddle.net/2Lqtp/4/

Answer 2

You need some small changes Please see the code below:

    $('.lst-cours .extrainfo').hide()
$('.lst-cours').click(function(){
    if($(this).children().find('.extrainfo').is(":visible"))
    {
        $('.lst-cours .extrainfo').hide("slow");
        $('.lst-cours .extrainfo').removeClass("active");
    }
    else
    {
        $('.lst-cours .extrainfo').hide("slow");
        $('.lst-cours .extrainfo').removeClass("active");
    $(this).children().find('.extrainfo').show("slow").addClass('active');
   }

    });