title: Extending collapsible divs to rows of a table
body: <p>I am able to collapse/expand divs.
  <a href="http://jsfiddle.net/soumyazyx/8Xyjy/10/" rel="nofollow">jsfiddle</a></p>
  
  <p>JQuery : </p>
  
  <pre><code>$(document).ready(function () {
      $(".data").hide();
      $(".header").click(function () {
          $(this).next(".data").slideToggle(200);
      });
  });
  </code></pre>
  
  <p>Sample html:</p>
  
  <pre><code>&lt;div class="outermost"&gt;
  &lt;p class="header"&gt;Category - 1&lt;/p&gt;
  &lt;div class="data"&gt;
      Sub Cateogry 1.1&lt;br/&gt;
      Sub Cateogry 1.2
  &lt;/div&gt;
  &lt;p class="header"&gt;Category - 2&lt;/p&gt;
  &lt;div class="data"&gt;
      Sub Cateogry 2.1&lt;br/&gt;
      Sub Cateogry 2.2
  </code></pre>
  
  <p>
  </p>
  
  <p>I want to modify this example so that it will be able to collapse/expand rows of a given table.
  (description - I have many categories and sub-categories.I am planning for a table which will show all the categories as separate rows .When we click on categories, it should show the sub-categories).</p>
  
  <p>div can't be placed inside a table.So,this approach is not working.</p>
  
  <p>Please suggest some alternatives or any poiner where I can get some documentation around it.</p>
  
  <p>Table(sort of a feedback form):</p>
  
  <pre><code>&lt;table&gt;&lt;tbody&gt;
  &lt;tr&gt;&lt;th&gt;Item&lt;/th&gt;&lt;th&gt;Feedback&lt;/th&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td colspan=2&gt;Category1&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;Sub Category 1.1&lt;/td&gt;&lt;td&gt;&lt;input type="text" &gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;Sub Category 1.2&lt;/td&gt;&lt;td&gt;&lt;input type="text" &gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td colspan=2&gt;Category2&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;Sub Category 2.1&lt;/td&gt;&lt;td&gt;&lt;input type="text" &gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;/tbody&gt;&lt;/table&gt;    
  </code></pre>