title: HTML / Javascript - Expand and collapse table rows (childs) by clicking on a parent row
body: <p>I am trying to solve one issue since days and finally understood that I will not succeed without help ... I want to do a common thing that we see on internet everyday : be able to click on a table row in order to show more details. But here more details does not mean a block of text but child rows which have same shape as parent rows.</p>
  
  <p>Here is an example of HTML table :</p>
  
  <pre><code>&lt;table class="collapse table"&gt;
  &lt;tr&gt;
      &lt;th&gt;Age&lt;/th&gt;
      &lt;th&gt;Sex&lt;/th&gt;
      &lt;th&gt;Name&lt;/th&gt;
      &lt;th&gt;From&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr class="parent"&gt;
      &lt;td&gt;100&lt;/td&gt;
      &lt;td&gt;M&lt;/td&gt;
      &lt;td&gt;Dodo&lt;/td&gt;
      &lt;td&gt;UK&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr class="cchild"&gt;
      &lt;td&gt;10&lt;/td&gt;
      &lt;td&gt;M&lt;/td&gt;
      &lt;td&gt;Child&lt;/td&gt;
      &lt;td&gt;UK&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr class="cchild"&gt;
      &lt;td&gt;10&lt;/td&gt;
      &lt;td&gt;M&lt;/td&gt;
      &lt;td&gt;Child&lt;/td&gt;
      &lt;td&gt;UK&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr class="cchild"&gt;
      &lt;td&gt;10&lt;/td&gt;
      &lt;td&gt;M&lt;/td&gt;
      &lt;td&gt;Child&lt;/td&gt;
      &lt;td&gt;UK&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr class="parent"&gt;
      &lt;td&gt;100&lt;/td&gt;
      &lt;td&gt;M&lt;/td&gt;
      &lt;td&gt;Dodo&lt;/td&gt;
      &lt;td&gt;UK&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr class="cchild"&gt;
      &lt;td&gt;10&lt;/td&gt;
      &lt;td&gt;M&lt;/td&gt;
      &lt;td&gt;Child&lt;/td&gt;
      &lt;td&gt;UK&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr class="cchild"&gt;
      &lt;td&gt;10&lt;/td&gt;
      &lt;td&gt;M&lt;/td&gt;
      &lt;td&gt;Child&lt;/td&gt;
      &lt;td&gt;UK&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr class="cchild"&gt;
      &lt;td&gt;10&lt;/td&gt;
      &lt;td&gt;M&lt;/td&gt;
      &lt;td&gt;Child&lt;/td&gt;
      &lt;td&gt;UK&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p></p>
  
  <p>The number of child and parent is flexible, I would like a example which manage flexible with that characteristic . Child rows will have to be closed when the page is load, and expand only if the user click on the parent one. 
  If it is also possible I would like to add an icon which indicates to user the ability to click on a row ( basically a "+" and a "-" ), but not a simple string, a real icon. </p>
  
  <p>I have seen and followed many <a href="https://stackoverflow.com/questions/3897396/can-a-table-row-expand-and-close">examples</a>, but no one of them did the job perfectly and tried to modify examples ... no success. Most of them were examples based on Datatables and I do not want to use it.</p>
  
  <p>Can you help me please ? I know that my question is quite full and I am asking for a big part of work, but did not find a complete example to do what I want using HTML,CSS,Javascript only. </p>
  
  <p>Thank you.</p>
  
  <p><strong><em>Edit after Andrei Gheorghiu's answer :</em></strong></p>
  
  <p>I would like finally being able to click only on the icon rather than on the entire row, I have others buttons on the same row, and if I click on, it actives the child opening. So what I did, waiting a better solution : </p>
  
  <p>HTML : 
  Changing "tr" to a specific "td" class and add the icon line within this "td.toto" class.</p>
  
  <p>JS : </p>
  
  <pre><code>$('table').on('click', 'td.toto', function(){
    console.log("Check click works: ");
    $(this).closest('tbody').toggleClass('open');
  });
  </code></pre>
  
  <p>So is it possible to follow your solution structure, but only change the click target ? By better solution, I meant, to click only on the icon rather than on the entire "td" now. </p>
  
  <p>Thank you.</p>