Good afternoon, I have the following table where my td parents, so to speak, I put the big cookie class and for each child I chose to put a small cookie .
What he wanted to do is that when clicking on the + his children would be shown and when clicking on another they would be hidden. But the only thing I achieve is that in the event that there are more than one, only the first one is hidden
//Esta es la funcion con la que oculto los TD
$("tr.Galleta_Grande").click(function () {
id = $(this).closest('tr').attr('id');
$(this).next("tr.Galleta_Chica").toggle();
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">
<link href="../../../resources/css/bootstrap-select.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table id="example" class="table table-striped table-bordered " style="width:100%">
<thead class="thead-dark">
<tr>
<td></td>
<th>ÁREA</th>
<th>Enero</th>
<th>Febrero</th>
<th>Marzo</th>
<th>Abril</th>
<th>Mayo</th>
<th>Junio</th>
<th>Julio</th>
<th>Agosto</th>
<th>Septiembre</th>
<th>Octubre</th>
<th>Noviembre</th>
<th>Diciembre</th>
</tr>
</thead>
<tbody>
<tr class="Galleta_Grande" id="1"><td><a style="color:purple;cursor:pointer"><span class="glyphicon glyphicon-plus-sign"></span></a></td><td>Dirección</td><td>0</td><td>61</td><td>50</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr><tr class="Galleta_Chica" style=""><td></td><td>Livia Albarrán Perales</td><td>0</td><td>11</td><td>50</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr><tr class="Galleta_Chica"><td></td><td>Crescencio Aguilar Tapia</td><td>0</td><td>50</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr><tr class="Galleta_Grande" id="8"><td><a style="color:purple;cursor:pointer"><span class="glyphicon glyphicon-plus-sign"></span></a></td><td>Indicadores</td><td>100</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr><tr class="Galleta_Chica"><td></td><td>Reyna Aurora Aguilar Tapia</td><td>100</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr><tr class="Galleta_Grande" id="21"><td><a style="color:purple;cursor:pointer"><span class="glyphicon glyphicon-plus-sign"></span></a></td><td>Recursos Financieros</td><td>0</td><td>20</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr><tr class="Galleta_Chica"><td></td><td>Raul Alfonso Amaya Bucio</td><td>0</td><td>20</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
</tbody>
<tfoot>
<tr>
<th></th>
<th>Total General</th>
<th>Enero</th>
<th>Febrero</th>
<th>Marzo</th>
<th>Abril</th>
<th>Mayo</th>
<th>Junio</th>
<th>Julio</th>
<th>Agosto</th>
<th>Septiembre</th>
<th>Octubre</th>
<th>Noviembre</th>
<th>Diciembre</th>
</tr>
</tfoot>
</table>
I have two questions
1.-How can I hide all the td children of the father?
2.-How could children be hidden by default?
I attach the following solution according to the points you mention:
1.-How can I hide all the td children of the father?
A: Adding a dependency of the children with the parents, for this we will simply add the id of the parent in its class.
2.-How could children be hidden by default?
A: Appending from the start that the children are hidden thanks to the common class.
Attached the code in solution to your problem
On the Jquery side, I used your function call structure adding a touch of aesthetics when hiding them.
I attach the compiler to be displayed: