Question

I am toggling 'tr.subCategory1'and its siblings .RegText. at the same time I am trying to store its ids in the array like this list_Visible_Ids[$(this).attr('id')] = $(this).css('display') != 'none' ? 1 : null; (When I collapsed I need store 'null' in array at its id place, If I expand I need store I need store 1 at its id place). But everytime alert($(this).css('display')) showing block. How can I handle this?. So When I collapsed or expanded it is storing 1 only.

$(document).ready(function() {

       $('tr[@class^=RegText]').hide().children('td');

        list_Visible_Ids = [];
        var idsString, idsArray;

        idsString = $('#myVisibleRows').val();
        idsArray = idsString.split(',');

        $.each(idsArray, function() {
            if (this != "" || this != null) {
                $('#' + this).siblings('.RegText').toggle();
                list_Visible_Ids[this] = 1;
            }
        });
        $('tr.subCategory1')
        .css("cursor", "pointer")
        .attr("title", "Click to expand/collapse")
        .click(function() {
             $(this).siblings('.RegText').toggle();
             $(this).siblings('.VolumeRegText').toggle();
             //alert($(this).css('display'))
            list_Visible_Ids[$(this).attr('id')] = $(this).css('display') != 'none' ? 1 : null;

        });

        $('#form1').submit(function() {

            idsString = '';
            for (var index in list_Visible_Ids) {
                idsString += (idsString != '' ? ',' : '') + index;
            }

            $('#myVisibleRows').val(idsString);
            form1.submit();
        });
    });

Answer 1

You aren’t toggling the tr itself, only its siblings (with class .RegText and .VolumeRegText). You therefore have to check if these are visible when you are storing the state in the array. For this you can use .is(":hidden") on one of the siblings. The click function would then look like this

$('tr.subCategory1')
.css("cursor", "pointer")
.attr("title", "Click to expand/collapse")
.click(function() {
    $(this).siblings('.RegText').toggle();
    var isHidden = $(this).siblings('.VolumeRegText').toggle().is(':hidden');
    list_Visible_Ids[$(this).attr('id')] = !isHidden ? 1 : null;
});

---

There is also a lot to comment on the rest of the code. In

$('tr[@class^=RegText]').hide().children('td');

skip the .children('td'), as you aren’t using this selection.

---

list_Visible_Ids = []; should be declared using var.

---

Looping through idsArray, you are checking this != "" || this != null), which should be using && instead of ||.

$.each(idsArray, function() {
    if (this != "" && this != null) {
        $('#' + this).siblings('.RegText').toggle();
        list_Visible_Ids[this] = 1;
    }
});

There’s also really no point in using the $.each() function instead of a regular JavaScript for-loop

---

It also seems you are using an old version of jQuery, since using the @ in selectors was deprecated in version 1.3.