title: Expandable table view in HTML
body: <p>I am building a dynamic table that fetches and displays data from database, the structure of table looks like this</p>
  
  <pre><code>&lt;table class="table" id="report"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;Title&lt;/th&gt;
        &lt;th&gt;Skill&lt;/th&gt;
        &lt;th&gt;Area&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
  
    &lt;tbody&gt;
      &lt;?
        $sql="SELECT * from tablename ";
        $result= mysqli_query($con, $sql);
        if(mysqli_num_rows($result)&gt;0) {
          while($row = mysqli_fetch_assoc($result)) {
            &lt;tr&gt;
              &lt;td&gt;&lt;? echo $title; ?&gt;&lt;/td&gt;
              &lt;td&gt;&lt;? echo $skill; ?&gt;&lt;/td&gt;
              &lt;td&gt;&lt;? echo $area; ?&gt;&lt;/td&gt;
            &lt;/tr&gt;
          }
        }
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I wish that when a user clicks on title a view should expand and then on another click it should collapse.</p>
  
  <p>I built a static table in <a href="http://jsfiddle.net/learner001/pyq67q33/" rel="nofollow">jsfiddle</a> and it was working fine, but when I tried to merge the code with my above table it is not working. Can anyone please tell where I went wrong?</p>