ansaurus

Question

Answer 1

+1 A:

Your code needs a few teaks, this:

$("tr .top").click(function () {
  $('tr .bt').nextUntil('tr:not(.bt)').slideToggle("slow");
  )};

Should be this:

$("tr.top").click(function () {
  $(this).nextUntil('tr:not(.bt)').slideToggle("slow");
});

The class is on the <tr> not beneath is so no space there. You want to start with $(this) (the clicked <tr>) when traversing, and the last )}; is out of order, it should be }); closing the function then then .click() call.

Here's the updated/working version, keep in mind slide toggling table rows gets messy, you may want to fade toggle instead, like this:

$("tr.top").click(function () {
  $(this).nextUntil('tr:not(.bt)').animate({ opacity: "toggle" });
});

Test that version here.

Nick Craver 2010-09-15 13:40:18

@Nick: Thank it works! Could you also let me know why in Chrome is adding an extra row when I click on top row?, Thanks again.

Cesar Lopez 2010-09-15 13:44:00

@Cesar - It's not doing that here, though the animation will be off when you `.slideToggle()` because of how a table is rendered... added a fading alternative for this.

Nick Craver 2010-09-15 13:44:55

@Nick: Thanks!!!

Cesar Lopez 2010-09-15 13:47:32

Answer 2

+1 A:

$("tr.top").click(function () {
//   ^
  $('tr.bt').nextUntil('tr:not(.bt)').slideToggle("slow");
//     ^
// And I think you should use $(this) here instead of $('tr.bt')
//  otherwise you cannot toggle the first .bt row,
//  but all the rest will be toggled regardless of which group.
});

There should be no spaces between tr and the ..

"a .b"

matches all descendent of a which have class b, while

"a.b"

matches all a which have class b.

KennyTM 2010-09-15 13:41:09

This still won't produce the desired effect of toggling local "child" rows...this will toggle on/off *all* "children", as opposed to those for the given `.top` parent :)

Nick Craver 2010-09-15 13:46:59

ansaurus

tags:

views:

answers:

jquery using .nextUntil()

related questions