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. 
Iniciar la animación en la barra de progreso cuando esté visible en la pantalla.
Mostrar imagen cuando se desplaza sobre el botón
Jquery UI Sortable, desplazamiento (ejemplo de jsFiddle)
desvanecimiento visual no está sucediendo
Se llama Bootstrap Switch JS, pero no hace nada.

    
    


	

		      	
  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