Expand Collapse table individually and together

Question

Hi,

I need to be able to expand and collapse certain sections of a table individually by pressing that section's button but if a user wants to see all the data in the table, they hit one button at the top of the table to expand all the information.

The use should then still be able to collapse sections they are not interested in and if they then collapse the entire table, all cells should then collapse again.

I've given this a bash in two different ways and this is close but my logix fails me. I'd appreciate a look at it please.

$(function () {
        var collapseIcon = 'images/btn-open.gif';
        var collapseText = 'Collapse this section';
        var expandIcon = 'images/btn-closed.gif';
        var expandText = 'Expand this section';

        var $tableNum = 0;

        $(".openCloseBtn").each(function (i) {
            var $section = $(this);
            $tableNum = i + 1
            $($section).attr('src', collapseIcon)
            .attr('alt', collapseText)
            .addClass('clickable')
            .click(function () {
                if ($section.is('.collapsed')) {
                    $section.removeClass('collapsed');
                    $(this).attr('src', collapseIcon)
                    .attr('alt', collapseText);
                    $('.table' + i).fadeOut("slow");
                }
                else {
                    //alert('i = ' + i)
                    $section.addClass('collapsed');
                    $('.table' + i).fadeIn("slow");
                    $(this).attr('src', expandIcon)
                    .attr('alt', expandText);

                }

            });

        });

        $('#ViewAll').click(function () {
            $(".openCloseBtn").each(function (i) {
                var $section = $(this);
                if ($section.is('.collapsed')) {
                    $section.removeClass('collapsed');
                    $(this).attr('src', collapseIcon)
                    .attr('alt', collapseText);
                    $('.table' + i).fadeOut("slow");
                }
                else {
                    //alert('i = ' + i)
                    $section.addClass('collapsed');
                    $('.table' + i).fadeIn("slow");
                    $(this).attr('src', expandIcon)
                    .attr('alt', expandText);

                }
            });
        });

    });

Thanks

Answer 1

Is the code doing the reverse? Right here, it looks like the code is doing the reverse with the classname. The row fades out if there is no collapsed class. You can try just using .toggle so jQuery will handle everything.

      if ($section.is('.collapsed')) {
            $section.removeClass('collapsed');
            $(this).attr('src', collapseIcon)
            .attr('alt', collapseText);
            $('.table' + i).fadeOut("slow");
        }
        else {
            //alert('i = ' + i)
            $section.addClass('collapsed');
            $('.table' + i).fadeIn("slow");
            $(this).attr('src', expandIcon)
            .attr('alt', expandText);

        }