I am able to collapse/expand divs. jsfiddle

JQuery :

$(document).ready(function () {
    $(".data").hide();
    $(".header").click(function () {
        $(this).next(".data").slideToggle(200);
    });
});

Sample html:

<div class="outermost">
<p class="header">Category - 1</p>
<div class="data">
    Sub Cateogry 1.1<br/>
    Sub Cateogry 1.2
</div>
<p class="header">Category - 2</p>
<div class="data">
    Sub Cateogry 2.1<br/>
    Sub Cateogry 2.2

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).

div can't be placed inside a table.So,this approach is not working.

Please suggest some alternatives or any poiner where I can get some documentation around it.

Table(sort of a feedback form):

<table><tbody>
<tr><th>Item</th><th>Feedback</th></tr>
<tr><td colspan=2>Category1</td></tr>
<tr><td>Sub Category 1.1</td><td><input type="text" ></td></tr>
<tr><td>Sub Category 1.2</td><td><input type="text" ></td></tr>
<tr><td colspan=2>Category2</td></tr>
<tr><td>Sub Category 2.1</td><td><input type="text" ></td></tr>
</tbody></table>    

I am able to collapse/expand divs. jsfiddle

JQuery :

$(document).ready(function () {
    $(".data").hide();
    $(".header").click(function () {
        $(this).next(".data").slideToggle(200);
    });
});

Sample html:

<div class="outermost">
<p class="header">Category - 1</p>
<div class="data">
    Sub Cateogry 1.1<br/>
    Sub Cateogry 1.2
</div>
<p class="header">Category - 2</p>
<div class="data">
    Sub Cateogry 2.1<br/>
    Sub Cateogry 2.2

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).

div can't be placed inside a table.So,this approach is not working.

Please suggest some alternatives or any poiner where I can get some documentation around it.

Table(sort of a feedback form):

<table><tbody>
<tr><th>Item</th><th>Feedback</th></tr>
<tr><td colspan=2>Category1</td></tr>
<tr><td>Sub Category 1.1</td><td><input type="text" ></td></tr>
<tr><td>Sub Category 1.2</td><td><input type="text" ></td></tr>
<tr><td colspan=2>Category2</td></tr>
<tr><td>Sub Category 2.1</td><td><input type="text" ></td></tr>
</tbody></table>    

• javascript
• jquery
• html-table

Share Improve this question Follow edited Dec 1, 2016 at 14:56 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Apr 13, 2013 at 10:14 SoumyaSoumya 89333 gold badges1717 silver badges3333 bronze badges 2

• Please show the markup of the table that you want to work with. – alexn Commented Apr 13, 2013 at 10:20
• Added the table structure.It is sort of a simple feedback form. – Soumya Commented Apr 13, 2013 at 10:35

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

as it has been suggested earlier, the best markup for such structure is nested ul/ol but if you have to use table, you could utilize <tbody> elements. See this jsfiddle

CSS

 .outermost td{padding: 10px;}
 .outermost .header{background:#eee}
 .data{display: none;}
 .data td{padding-left :20px;}

Markup

 <div class="outermost">
     <table>
        <tbody class="header">
           <tr>
              <td>Category - 1</td>
           </tr>
        </tbody>
        <tbody class="data">
           <tr>
              <td>Sub Cateogry 1.1</td>
           </tr>
           <tr>
              <td>Sub Cateogry 1.2</td>
           </tr>
        </tbody>
        <tbody class="header">
           <tr>
              <td>Category - 2</td>
           </tr>
        </tbody>
        <tbody class="data">
           <tr>
              <td>Sub Cateogry 2.1</td>
           </tr>
           <tr>
              <td>Sub Cateogry 2.2</td>
           </tr>
        </tbody>
     </table>
  </div>

JavaScript

     $(document).ready(function () {
        $(".header").click(function () {
           $(this).next("tbody.data").slideToggle(200);
        });
     });

by using this technique, you'll be able to group several table rows and show/hide them as one unit.

I suggest using ul in this case as it's suitable for tree structure For example:

<ul class="outermost">
    <li>Category - 1</li>
    <li>
      <ul>
          <li>Sub Cateogry 1.1</li>
          <li>Sub Cateogry 1.2</li>
      </ul>
    </li>
</ul>

or if you want to use table, you have to embed subtables in cells

<table class="outermost">
    <tr><td>Category - 1</td></tr>
    <tr>
        <td>
            <table>
                <tr><td>Sub Cateogry 1.1</td></tr>
                <tr><td>Sub Cateogry 1.2</td></tr>
            </table>
        </td>
    </tr>
    </table>

For consistency, i think we should use either ul, table or block (div). Should not mix them together. In case you need to mix between table and div, try this:

<table class="outermost">
    <tr><td>Category - 1</td></tr>
    <tr>
        <td>
            <div>
                <div>Sub Cateogry 1.1</div>
                <div>Sub Cateogry 1.2</div>
            </div>
        </td>
    </tr>
    </table>