Show / hide <td> upon other <td> click action

See more:

Javascript

HTML5

MVC5

I got a Table that shows a table just below the parent table , what i want to do is show or hide the "details" table upon clic on the main table but im not able to do it correctly

What I have tried:

This is my table structure

<pre lang="HTML"><pre><table class="table table-hover table-mail">
                            <tbody>
                                <tr class="table-tr-header">
                                    <td class="">No Ped</td>
                                    <td class="">Prov</td>
                                    <td class="">Notes</td>
                                    <td class="">Ped Date</td>
                                    <td class="">Delivery Date</td>
                                    <td class="">Department</td>
                                </tr>
                                @foreach (var itemParent in Model.compdg)
                                {
                                <tr class="read invoice-row" data-id="">
                                    <td id="header"  >@itemParent.No_Ped</td>
                                    <td id="header"  >@itemParent.Cod_Prov</td>
                                    <td id="header"  >@itemParent.Notas</td>
                                    <td id="header"  >@itemParent.Fecha_Ped</td>
                                    <td id="header">@itemParent.Fecha_Entrega</td>
                                    <td id="header"  >@itemParent.Cod_Depto</td>
                                </tr>
                                <tr id="details" style="display:none;">
                                    <td colspan="6">
                                        <table >
                                            @foreach (var itemChild in Model.compdl.Where(c => c.No_Ped == itemParent.No_Ped))
                                            {
                                            <tr>
                                                <td >@itemChild.No_Ped</td>
                                                <td >@itemChild.No_Lin</td>
                                                <td >@itemChild.No_Art</td>
                                                <td >@itemChild.Cantidad</td>
                                                <td >@itemChild.Precio</td>
                                                <td >@itemChild.Total</td>
                                            </tr>
                                            }
                                        </table>
                                    </td>
                                </tr>
                                }
                            </tbody>
                        </table>

i put a

style="display:none

on my detail table to hide it but i need to each time a column is clicked show its detailt table just below it , tables have a same value that its "No_Ped"

This is the JavaScript i have implemented so far but it hides the main table upon click and also dont make invisible the second table

<pre>
@section scripts{
    <script type="text/javascript">
        $(function () {
            var last_type = null;
            var filtered = false;
            $("td").on("click", function () {
                console.log("last_type: " + last_type);
                var type = $(this).text();
                console.log("type: " + type);
                if (filtered && last_type == type) {
                    // type is already filtered. Show all.
                    $("tr, td").show();
                    last_type = null; // reset
                    filtered = false; // reset
                } else {
                    $("tr, td").show(); // show all before filtering
                    $('td:first-child').parent('tr:not(:contains(' + type + '))').hide();
                    filtered = true; // set filter flag to true
                }
                last_type = type; // set last type clicked
            });
        });
    </script>
}

what can i do to make details table always hide, and just show upon click on main table?