Soumya Soumya - 6 days ago 4
Javascript Question

Extending collapsible divs to rows of a 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>

Answer

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>