Jquery accordion table should have the active class toggled

Question

By clicking the table I should add a Active class on the clicked TR and able to remove it by closing it or by clicking on another table.

What am I missing?

demo: http://jsfiddle.net/ve3ctfz6/

Js:

$(function () {
    var $list = $('.table');
    $list.find("tr").not('.accordion-wrapper').hide();
    $list.find("tr").eq(0).show();
    $list.find(".accordion-wrapper").click(function () {


        $list.find('.accordion-wrapper').not(this).siblings().fadeOut(500);
        $(this).siblings().fadeToggle(500);


        $(this).addClass('active');

        $list.find('.accordion-wrapper').not(this).removeClass('active');

        if ($list.find('.accordion-wrapper').hasClass('active')) {
            $list.find('.accordion-wrapper').not(this).removeClass('active');
        } else if ($(this).is('.active')) {
            $(this).siblings().fadeToggle(500);
            $('.active').removeClass('active');
        }

    });
});

Answer 1

Change

$(this).addClass('active');

to

$(this).toggleClass('active');

Demo