title: How to Expand and Collapse in HTML5 table
body: <p>I am trying to populate a table in HTML5 dynamically from Odata webservices.I am using JQuery for populating it.I have to also show a child table below each row of the table,when clicking on the first column of each row.I should be able to toggle the table from any row of the Parent table.</p>
  
  <p>I have attached the screenshot of the functionality. Could you please tell me how to achieve it?</p>
  
  <p><strong>JavaScript</strong>:</p>
  
  <pre class="lang-js prettyprint-override"><code>var xml;
  $.ajax(
      {
          url: "https://192.168.2.133:8080/sap/inv/opu/odata/sap/ZMM_CM_GR_OPENPO/zmm_gr_openpoCollection?$filter=bednr%20eq'0000000112'",
  
          type: 'GET',
          contentType: "application/xml;charset=utf-8",
          dataType: "",
          cache: false,
  
          success: function (data) {
              alert("Inside success");
              $(data).find("content").each(function () {
                  $(this).find("m\\:properties, properties").each(function () {
                      var $info = $(this);
                      var mat_doc_no = $info.find("d\\:mat_doc_no, mat_doc_no").text();
                      var zvendor = $info.find("d\\:zvendor, zvendor").text();
                      var ebelp_c = $info.find("d\\:ebelp_c, ebelp_c").text();
                      var zz_tmdocno_c = $info.find("d\\:zz_tmdocno_c, zz_tmdocno_c").text();
                      var zz_tmdocno = $info.find("d\\:zz_tmdocno, zz_tmdocno").text();
                      var bedat = $info.find("d\\:bedat, bedat").text();
                      var menge_c = $info.find("d\\:menge_c, menge_c").text();
                      var ebeln = $info.find("d\\:ebeln, ebeln").text();
  
                      localStorage.setItem("ebeln", ebeln);
                      localStorage.setItem("zz_tmdocno", zz_tmdocno);
                      localStorage.setItem("bedat", bedat);
                      localStorage.setItem("zvendor", zvendor);`enter code here`
  
                      $('tbody').append('&lt;tr id="test" &gt;&lt;td&gt;&lt;input type="checkbox" class = "chcktbl" /&gt;&lt;/td&gt;&lt;td onclick="showGRPODetails()"&gt;&lt;u&gt;&lt;b&gt;' + ebeln + '&lt;/b&gt;&lt;/u&gt;&lt;/td&gt;&lt;td&gt;' + zz_tmdocno + '&lt;/td&gt;&lt;td&gt;' + bedat + '&lt;/td&gt;&lt;td&gt;' + zvendor + '&lt;/td&gt;&lt;/tr&gt;');
  
                  });`enter code here`
              });
          },
          error: function (XMLHttpRequest, textStatus, errorThrown) {
              alert("Could not connect URL...!");
          }
      });
  
  function showGRPODetails() {
      $("#testid").toggle();
  
  }
  </code></pre>