implement code folding for a report with jquery

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

Your current code does expand/collapses the child of the parent row. In your example, it collapses both child rows (data1, data2 & data3,data4)

Are you trying to achieve something different here?

Umang

Answer 2

(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>

Answer 3

Take a look at this for incorporating the image toggle:

http://stackoverflow.com/questions/123401/using-jquery-to-find-the-next-table-row

I incorporated it into the code Umang shared and this appears to work on toggling the image as well as the rows underneath.

$(document).ready(function() {

//This will roll up rows on initial page load $("tr.header").nextUntil(".header").slideToggle("fast", function () { }); //end slideToggle

//This will expand collapse row and toggle + and - images $("tr.header").click(function () {

   $(this).nextUntil(".header").slideToggle("fast", function () { 
   }); //end slideToggle

   if ( ( $(this).hasClass('hidden') ) ) {
     $('img', this).attr("src", "plus.gif");
     $('img', this).attr("alt", "Click to expand row");
  } else {
     $('img', this).attr("src", "minus.gif");
     $('img', this).attr("alt", "Click to collapse row");
  }

   $(this).toggleClass('hidden');
   $(this).parent().next().toggle();

}); //end click

}); //end document.ready

Here is the associated HTML but you'll have to remove the HTML comments around the img tag because that is just to prevent stackoverflow from thinking I'm posting an actual image.

1 line1 2 line2 3 line3 4 line4 5 line5 6 line6