Question

I’m integrating an accordion effect into a table.

The table rows with the class ‘more’ are children of the above table row. When that table row is clicked, I want the ‘more’ tr’s to toggle. How do I just target those table rows and not the regular ‘row’ table rows.

        <tr class="row first">
            <td>
                <span class="time">09.00&ndash;09.15</span>
                <h3>
                    Welcome and introduction</h3>
            </td>
            <td>
                person info</td>
        </tr>
        <tr class="row">
            <td>
                <span class="time">09.00&ndash;09.15</span>
                <h3>
                    Welcome and introduction</h3>
            </td>
            <td>
                person info</td>
        </tr>


        <tr class="more">
            <td>
                <h3>
                    hidden content</h3>
            </td>
            <td>
                person info</td>
        </tr>
        <tr class="more">
            <td>
                <h3>
                    hidden info</h3>
            </td>
            <td>
                person info</td>
        </tr>
            </div>

        <tr class="row">
            <td>
                <span class="time">09.00&ndash;09.15</span>
                <h3>
                    Welcome and introduction</h3>
            </td>
            <td>
                person info</td>
        </tr>
        <tr class="row break">
            <td>
                <h3>
                    10.50&ndash;11.20 Coffee break</h3>
            </td>
            <td>
                &nbsp;</td>
        </tr>

Answer 1

Use a combination of .nextUntil() and :not.

$("table tr.row").each(function(){
  var $this = $(this);
  $this.click(function(){
    $this.nextUntil(":not(.more)").toggle();
  });
});

The selector :not(.more) matches all the elements that doesn’t contain a more classname.

See it here.