Show/ Hide table row

Question

I create a table dynamically and that lists Nodes (with 'FATHER' and 'Sons'), I would like that when loading only the first nodes (FATHER) appear and when clicking the children were shown.

The click function would be to show and hide nodes.

JS:

$(document).ready(function () {

    CarregaQuantidadeColunas();


    function CarregaQuantidadeColunas() {
        $('#tblAcao tbody').empty();
        $.ajax({
            url: "/GED_Diretorio/ListaDiretorios",
            data: {},
            async: false,
            success: function (data) {
                if (data.length > 0) {


                    $.each(data, function (i, element) {

                        var QtVirgula = element.QuantidadeVirgula;                     

                            if (element.TemFilho === "Sim") {
                                $("#tblAcao > tbody").append(
                                    "<tr>" +
                                    " <td><a href='#'><p style='text-indent: " + QtVirgula + "0px;'> " + element.Codigo + "-" + element.Descricao + "</p></a><td>" +
                                    "</tr>"
                                );
                            } else {
                                $("#tblAcao > tbody").append(
                                    "<tr>" +
                                    " <td><p style='text-indent: " + QtVirgula + "0px;'> " + element.Codigo + "-" + element.Descricao + "</p><td>" +
                                    "</tr>"
                                );
                            }

                    });



                } else {
                    $('#tblAcao tbody').empty();
                }
            }
        });
    }

});// fecha $(document).ready JS

HTML:

<table id="tblAcao" class="table table-striped">
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

Answer 1

An easy way using Jquery using the function 'slideToggle' thus remaining:

$('.header').click(function(){
   $(this).find('span').text(function(_, value){return value=='-'?'+':'-'});
    $(this).nextUntil('tr.header').slideToggle(100, function(){
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="0">
    <tr class="header" id="header1">
        <td colspan="2">Pai 1</td>
    </tr>
    <tr data-for="header1" style="display:none">
        <td>filho</td>
        <td>filho</td>
    </tr>
    <tr data-for="header1" style="display:none">
        <td>filho</td>
        <td>filho</td>
    </tr>
    <tr class="header" id="header2">
        <td colspan="2">Pai 2</td>
    </tr>
    <tr data-for="header2" style="display:none">
        <td>filho</td>
        <td>filho</td>
    </tr>
    <tr data-for="header2" style="display:none">
        <td>filho</td>
        <td>filho</td>
    </tr>
    <tr data-for="header2" style="display:none">
        <td>filho</td>
        <td>filho</td>
    </tr>
</table>

You can learn more events of this method in his documentation:

https://api.jquery.com/slidetoggle/