Jquery - How to show the rows which are hidden on button click

Question

I have a table which has hierarchy data (parents child's hierarchy). There is button on click user can hide or show all related child's to that particular parent.

I have done this but I am making ajax call to bring the child's related to parent which is just collapsed by clicking button.

There are a few situations. Don't care about the First one I did This.

1) When only root node is shown: Then I have to make ajax call to bring child's related to that root node and further.

2) But when all hierarchy list is displayed: then user can collapse all children by clicking parent node button but when user expand child's clicking same button at that time I don't want to make a ajax call because I have those child's or rows or I can keep in variable or some other way.

function getChildern(primaryId, isFlat, col) {
var id = event.target.id
var allChildern = null
if(!$(".id_"+event.target.id).hasClass('minus-symbol')){


    /*
    Note : here I want to check whether it's collapsed or it's a new thing
    if It's new make ajax request else build jquery code to show childs related to this parent which are just collapsed.
    */


    $(".id_"+event.target.id).removeClass('plus-symbol').addClass('minus-symbol')
    $.ajax({
        url : ("/getChildsDataRows"),
        type : "POST",
        data : {
            primaryId : primaryId
        },
        success : function(result) {
            var substr = result.data
            $.each(substr , function(i, val) { 
                // $(".id_"+id).show();
                 var suprSubstr = substr [i];
                 var tr = '<tr>' ;
                 $.each(suprSubstr , function(i, val) { 
                     tr += '<td>' + suprSubstr[i]  + '</td>';
                 });
                 tr += '</tr>'
                 $('table tr:nth-child(' + rowNumber + ')').after(tr);
                 //$(".id_"+event.target.id).removeClass('plus-symbol').addClass('minus-symbol')
            });
        }
     });
}else{
    $(".id_"+event.target.id).addClass('plus-symbol').removeClass('minus-symbol')
    allChildern = $(".parent_"+id).map(function() {
        $("#"+this.id).closest("tr").hide();
        return this.id
    }).get();

    if(allChildern == ''){
    }else{
        removeChildern(allChildern)
    }

    function removeChildern(allChildern){
        //alert(allChildern)
        $.each(allChildern , function(i, val) {
            $(".id_"+allChildern[i]).addClass('plus-symbol').removeClass('minus-symbol')
            var allSubChildern = null
            allSubChildern = $(".parent_"+allChildern[i]).map(function() {
                $("#"+this.id).closest("tr").hide();
                return this.id
            }).get();

            if(allSubChildern.length == 0){

            }else{
                removeChildern(allSubChildern)
            }//$("#"+allChildern[i]).closest("tr").hide();
        });

    }   
  }
 }
}

Here is DOM Structure

<a onclick="getChildern('1','false','UniqueId')" title="View"><i class="minus-symbol id_1 parent_0" style="height:10px;margin-left:1px;" id="1"> </i></a>

Answer 1

As per our discussion, i am updating the code.

if($("#data-grid-table-tree tbody tr").length > 0){
  // children already exist. no need for ajax call, just show the children
}else{
  // children doesnt exists. make a call.
}

Answer 2

allChildern = $(".parent_"+id).map(function() {
$("#"+this.id).closest("tr").show();
return this.id
}).get();

if(allChildern == ''){
  // make ajax call

}else{
showChildern(allChildern)
clickable=true
}

function showChildern(allChildern){
//alert(allChildern)
$.each(allChildern , function(i, val) {
    $(".id_"+allChildern[i]).addClass('plus-symbol').removeClass('minus-symbol')
    var allSubChildern = null
    allSubChildern = $(".parent_"+allChildern[i]).map(function() {
        $("#"+this.id).closest("tr").show();
        return this.id
    }).get();

    if(allSubChildern.length == 0){

    }else{
        showChildern(allSubChildern)
    }//$("#"+allChildern[i]).closest("tr").show();
   });

  }