Question

I recently found this expandable table with Jquery, it is very lightweight and awesome code. However, I need to make small changes to it, but I don’t know how. If you take a looks at this demo when you go clicking from the first row to the second, third, fourth…so on. The row just keeps on expanding, instead I need the in-active rows to contract. Meaning, when a user goes from click first row to second, then the previous one contracts..

I hope it is clear, and I would provide the code but you can see the source code, it is neat and Here is the full tutorial.

thanks.

Ok, here is the code in Jsfiddle:

    $(document).ready(function(){
        $("#report tr:odd").addClass("odd");
        $("#report tr:not(.odd)").hide();
        $("#report tr:first-child").show();

        $("#report tr.odd").click(function(){
            $(this).next("tr").toggle();
            $(this).find(".arrow").toggleClass("up");
        });
        //$("#report").jExpand();
    });

​

Answer 1

Here’s one approach, though I feel it could be somewhat simplified:

$('#report tbody tr:nth-child(odd)').addClass('odd');
$('#report tbody tr:nth-child(even)').addClass('even').hide();
$('tr.odd').click(
    function(){
        var that = $(this),
            next = that.next('.even');
        that.find('.arrow').toggleClass('up');
        next.toggle().siblings('.even').hide();
        $('.even:not(":visible")').each(
            function(){
                $(this).prev('.odd').find('.up').removeClass('up');
            });
    });

JS Fiddle demo.

References:

• addClass().
• each().
• find().
• hide().
• :not() selector.
• prev().
• removeClass().
• siblings().