ansaurus

Question

Answer 1

A:

Shouldn't it be more like this? I mean, this is normally the whole document.

   $("tr#cat1.header").click(function () { 
      $("tr#cat1.child").slideToggle("fast");
   });

Bobby 2009-12-31 14:41:02

Answer 2

+5 A:

Firstly, you shouldn't have duplicate IDs for the rows. IDs should be unique for each element on the page.

Also, you shouldn't have to use each, as jQuery will automatically apply the slideToggle function to each element matched by the selector. I would suggest dropping the IDs and using the class names instead:

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

If you want to make sure only certain tables can perform this toggle functionality, put a class on the table and update your selectors:

<table class="collapsible">
    <tr>
        <td>Cat1</td>
        <td>Row</td>
    </tr>
    <tr>
        <td>Collapsible</td>
        <td>Row</td>
---

$(".collapsible tr:first").click(function () { 
   $(this).nextAll().slideToggle("fast");
});

Response to edit:

Rory's answer is correct, I am simply expanding upon it. If you use multiple tables, you can remove the CSS classes from the <tr>s on the rows and simplify the tables down to:

<table class="collapsible">
    <tr>
        <td>Cat1</td>
        <td>Cat1</td>
    </tr>
    <tr>
        <td>Collapsible</td>
        <td>Row</td>
    </tr>
</table>

<table class="collapsible">
    <tr>
        <td>Cat2</td>
        <td>Cat2</td>
    </tr>
    <tr>
        <td>Collapsible</td>
        <td>Row</td>
    </tr>
</table>

and the jQuery down to:

$(".collapsible tr:first").click(function () {  
   $(this).nextAll().slideToggle("fast"); 
});

John Rasch 2009-12-31 14:41:25

The problem I will run into here is that all child rows will collapse when I click on any header, whereas I'd rather only the child rows for THAT header collapse. This is what I was attempting to accomplish by having the same IDs for a group of rows (kind of as a way to group them together). I've edited the question to reflect this. Any suggestions since multiple tags with the same ID is clearly wrong?

David Hague 2009-12-31 14:50:59

@David: Take a look at my answer, it takes care of what you want without using duplicate id values.

Rory 2009-12-31 15:10:07

+1 I completely forgot about :first, shows what happens when you go on leave for a month ^_^

Rory 2009-12-31 15:47:24

Answer 3

+3 A:

This will cause the click to only affect the rows in the table containing the header you clicked on, which means you can change it to work with a css class instead of duplicating the id.

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

Basically this is the header that is clicked, we wrap that in a jQuery object and call parent() (which returns the table), and then specify it as the context for the new query.

Your page now looks something like this:

<html>                                                                  
<head>                                                                  
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"&gt;&lt;/script&gt;
<link href="styles.css" rel="stylesheet" type="text/css" />


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

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


});

</script>                                                               

</head>                                                                 
<body>                                                                  

<table>
    <tr class="header">
        <td>Cat1</td>
        <td>Row</td>
    </tr>
    <tr class="child">
        <td>data1</td>
        <td>data2</td>
    </tr>
    <tr class="child">
        <td>data3</td>
        <td>data4</td>
    </tr>
</table>

<table>
    <tr class="header">
        <td>Cat1</td>
        <td>Row</td>
    </tr>
    <tr class="child">
        <td>data1</td>
        <td>data2</td>
    </tr>
    <tr class="child">
        <td>data3</td>
        <td>data4</td>
    </tr>
</table>
</body>                                                                 
</html>

Rory 2009-12-31 15:04:18

P.S. I'm having a little trouble getting slideToggle to work in IE, but it work's fine in Opera.

Rory 2009-12-31 15:12:00

It's working in IE again but theres no animation, it looks like it just pops in and out of existence. Leave it to IE to be a pain...

Rory 2009-12-31 15:23:24

This is exactly what I'm looking for. It took me a while to figure out the line: $("tr.child", $(this).parent()).slideToggle("fast"); but I think I've got it now: "for each row where the class is 'child' and the parent of that row is the row that was clicked, slideToggle. Brilliant, thank you!

David Hague 2009-12-31 15:24:37

Woops, so close. Should read: "for each row where the class is 'child' and the parent of that row is the table where the header row was clicked, slideToggle that child row in that table"

David Hague 2009-12-31 15:32:58

+1 - I came back to suggest using multiple tables (but it looks like you've already done that!) because semantically you shouldn't have headers interspersed throughout a single table. I'll be updating my answer as well to accommodate multiple tables.

John Rasch 2009-12-31 15:34:36

Yeah, thats pretty much it. If you need more info, take a look at the docs: http://docs.jquery.com/Traversing

Rory 2009-12-31 15:36:30

ansaurus

tags:

views:

answers:

Collapsible table in jQuery

Response to edit:

related questions