Question

I’m trying to collapse or expand table rows with + and – sign displayed on the first column, using jquery.

<script type="text/javascript">                                         
$(document).ready(function() {

   $("tr.header").click(function () { 
      $("tr.child", $(this).parent()).slideToggle("fast");

   });


});

I’m trying to use this code. But I want the child of the parent I’m clicking on alone to be toggled. Any ideas on how to do it?

Sample Html

<table>
    <tr class="header" >
         <td>1  </td>
        <td>line1</td>
    </tr>
    <tr class="child">
        <td>2</td>
        <td>line2</td>
    </tr>
    <tr class="child">
        <td>3</td>
        <td>line3</td>
    </tr>
  <tr class="header" >
         <td>4  </td>
        <td>line4</td>
    </tr>
    <tr class="child">
        <td>5</td>
        <td>line5</td>
    </tr>
    <tr class="child">
        <td>6</td>
        <td>line6</td>
    </tr>

</table>

Edit: I’m trying to put an image of + or – in the same row as line 1, line4 and trying to get a handle of it in the java script to switch between the two images. Can some help me on that?

Edit 1: Can I have the whole tree collapsed when the document is loaded. I’m beginner with using XQuery.

Answer 1

(In responce to the changed code)

There are two ways: Either change you code to toggle only the rows following the clicked header:

$("tr.header").click(function () { 
  $(this).nextUntil(".header").slideToggle("fast");
});

or use the original code and wrap the sections in TBODYs:

<table>
  <tbody>
    <tr class="header" >
         <td>1  </td>
        <td>line1</td>
    </tr>
    <tr class="child">
        <td>2</td>
        <td>line2</td>
    </tr>
    <tr class="child">
        <td>3</td>
        <td>line3</td>
    </tr>
  </tbody>
  <tbody>
    <tr class="header" >
         <td>4  </td>
        <td>line4</td>
    </tr>
    <tr class="child">
        <td>5</td>
        <td>line5</td>
    </tr>
    <tr class="child">
        <td>6</td>
        <td>line6</td>
    </tr>
  </tbody>
</table>