Toggle Open for rows after a particular class name

Question

I am trying to toggle open rows after a particular class. The current script hides all the rows after the class "toggle-open". But what I am looking at is, only hide the rows starting from the adjacent row till the row above the next class "toggle-open". Any thoughts on how to achieve this ??

http://jsfiddle.net/EBtPP/

Answer 1

If you wrap each group between <tbody> tags, you can try something like this: http://jsfiddle.net/EBtPP/2/

$('td.toggle-open').on('click', function() {
    $(this).parent().nextUntil('tr:has(td.toggle-open)').toggle();
});