HTML / Javascript: expandir y contraer filas de la tabla (hijos) haciendo clic en una fila principal

Intento resolver un problema desde hace días y finalmente entendí que no tendré éxito sin ayuda … Quiero hacer algo común que vemos en Internet todos los días: poder hacer clic en una fila de la tabla para mostrar más detalles . Pero aquí más detalles no significa un bloque de texto sino filas secundarias que tienen la misma forma que las filas primarias.

Aquí hay un ejemplo de tabla HTML:

El número de hijos y padres es flexible, me gustaría un ejemplo que manejara de manera flexible con esa característica. Las filas secundarias deberán cerrarse cuando la página esté cargada y expandirse solo si el usuario hace clic en la principal. Si también es posible, me gustaría agregar un ícono que indique al usuario la capacidad de hacer clic en una fila (básicamente un “+” y un “-“), pero no una simple cadena, un ícono real.

He visto y seguido muchos ejemplos , pero ninguno de ellos hizo el trabajo a la perfección y trató de modificar los ejemplos … sin éxito. La mayoría de ellos eran ejemplos basados ​​en Datatables y no quiero usarlos.

Puedes ayudarme por favor ? Sé que mi pregunta es bastante completa y estoy pidiendo una gran parte del trabajo, pero no encontré un ejemplo completo para hacer lo que quiero usando HTML, CSS, Javascript solamente.

Gracias.

Editar después de la respuesta de Andrei Gheorghiu:

Finalmente me gustaría poder hacer clic solo en el ícono en lugar de en toda la fila, tengo otros botones en la misma fila y, si hago clic en, activa la apertura del niño. Entonces, lo que hice, esperando una mejor solución:

HTML: Cambiando “tr” a una clase específica “td” y agregue la línea del icono dentro de esta clase “td.toto”.

JS:

 $('table').on('click', 'td.toto', function(){ console.log("Check click works: "); $(this).closest('tbody').toggleClass('open'); }); 

Entonces, ¿es posible seguir la estructura de su solución, pero solo cambiar el objective de clic? Con una mejor solución, me refiero a hacer clic en el ícono solo en lugar de en toda la “td” ahora.

Gracias.

Necesitará envolver cada grupo de padres + hijos en un

para esto y usar un pequeño script para cambiar el nombre de una clase en este

padre. Aquí hay un ejemplo:

 $('table').on('click', 'tr.parent .fa-chevron-down', function(){ $(this).closest('tbody').toggleClass('open'); }); 
 .parent ~ .cchild { display: none; } .open .parent ~ .cchild { display: table-row; } .parent { cursor: pointer; } tbody { color: #212121; } .open { background-color: #e6e6e6; } .open .cchild { background-color: #999; color: white; } .parent > *:last-child { width: 30px; } .parent i { transform: rotate(0deg); transition: transform .3s cubic-bezier(.4,0,.2,1); margin: -.5rem; padding: .5rem; } .open .parent i { transform: rotate(180deg) } 
         
Age Sex Name From
100 M Dodo UK
10 M Child UK
10 M Child UK
10 M Child UK
100 M Dodo UK
10 M Child UK
10 M Child UK
10 M Child UK
Age Sex Name From
100 M Dodo UK
10 M Child UK
10 M Child UK
10 M Child UK
100 M Dodo UK
10 M Child UK
10 M Child UK
10 M Child UK