Jquery Using .nextuntil()

I am trying to generate a jquery script to make all tr elements from a table with class top clickeable and when one tr with class top is clicked all tr below with class bt until th

Solution 1:

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

i think it was works..

Solution 2:

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.

Solution 3:

$("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.