title: How to Expand/Collapse Dynamic table row data
body: <p>I'm getting some data from servlet and displaying it in Jsp as a table using iterations.Now I want to expand/collapse each row individually based on row data item.
  I'm getting those data using ajax cal,but representing is the problem</p>
  
  <pre><code>    &lt;/script&gt;
  &lt;script type= "text/javascript"&gt;
      $(document).ready(function(){
          $('tr.parent').css("cursor","pointer")
          .attr("title","click to expand/collapse")
          .click(function(){
              $(this).siblings('.child-'+this.id).toggle();
          });
          $('tr[@class^=child-]').hide.children('td');
      });
  &lt;/script&gt;
  
          &lt;div class="container"&gt;
          &lt;table class="table table-striped" &gt;
              &lt;tr&gt;
              &lt;th&gt;Request ID&lt;/th&gt;
              &lt;th&gt;User ID&lt;/th&gt;
              &lt;th&gt;Login URL&lt;/th&gt;
              &lt;th&gt;Reason&lt;/th&gt;
          &lt;/tr&gt;
          &lt;c:forEach items="${Env}" var="col"&gt;
          &lt;tr class="parent" id="env"&gt;
              &lt;td&gt;&lt;a class="value" data-toggle="collapse" data-target="#details" href="./envDetails?envId=${col.environmentid }"&gt;&lt;span class="glyphicon glyphicon-collapse-down"&gt;&lt;/span&gt;${col.environmentid }&lt;/a&gt;&lt;/td&gt;
              &lt;td&gt;${col.userid }&lt;/td&gt;
              &lt;td&gt;${col.loginURL }&lt;/td&gt;
              &lt;td&gt;${col.reason }&lt;/td&gt;
          &lt;/tr&gt;
      &lt;tr id="details" class="child-env" style="display: table-row;"&gt;
              &lt;table&gt;
              &lt;tr&gt;
                  &lt;th&gt;Script Name&lt;/th&gt;
                  &lt;th&gt;Module&lt;/th&gt;
                  &lt;th&gt;Type&lt;/th&gt;
                  &lt;th&gt;Status&lt;/th&gt;
              &lt;/tr&gt;
              &lt;/table&gt;
           &lt;/tr&gt;
      &lt;/table&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>when ever expand the row it has to show like below</p>
  
  <pre><code>    &lt;tr&gt;
          &lt;th&gt;Script Name&lt;/th&gt;
          &lt;th&gt;Module&lt;/th&gt;
          &lt;th&gt;Type&lt;/th&gt;
          &lt;th&gt;Status&lt;/th&gt;
      &lt;/tr&gt;
  </code></pre>