Christian Mikkelsen Christian Mikkelsen - 10 months ago 51
jQuery Question

JQuery toggle rows on click

I'm trying to hide/show a subset of rows when clicking a row with a specific id.

Through a lot of searching the web and a lot of tries I got the code below.

Only problem is this code for some reason only hides/shows the very first set of rows.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="" >


<script src="" type="text/javascript"></script>

<script type="text/javascript">

$('#rowToClick').click(function ()
$(this).nextAll('tr').each( function()
if ($(this).is('#rowToClick'))
return false;

<tr id="rowToClick"><td>ClickMe</td></tr>
<tr id="Tr1"><td>Toggled</td></tr>
<tr id="Tr2"><td>Toggled</td></tr>
<tr id="Tr3"><td>Toggled</td></tr>
<tr id="Tr4"><td>Toggled</td></tr>
<tr id="Tr5"><td>Toggled</td></tr>
<tr id="rowToClick"><td>ClickMe</td></tr>
<tr id="Tr6"><td>Toggled</td></tr>
<tr id="Tr7"><td>Toggled</td></tr>
<tr id="Tr8"><td>Toggled</td></tr>
<tr id="Tr9"><td>Toggled</td></tr>
<tr id="Tr10"><td>Toggled</td></tr>


Anyone has a suggestion and/or possible rewrite of the code?

---------- Update - Final solution -----------

I ended up with the solution below based on Brandon's input, as I wanted to do more nesting with the same behaviour, kind of like a collapsible tree view.
Unfortunately that meant I had to add an extra attribute to keep track of the state, but I can live with that for now, until I find another way (ex. check visibility of the next row).

$(document).ready(function () {

function toggleRows(parentClass,subClass)
$(parentClass).click(function () {

if( $(this).attr("value")=="collapsed")


Answer Source

First, you cannot have multiple rows with the same id. Instead of setting id to "rowToClick", set the css class:

<tr class='rowToClick'><td>click me</td></tr>

Next, this should work:

             $(".rowToClick").click(function() { $(this).nextUntil(".rowToClick").toggle(); });