I have a table with some rows, It's somewhat hard to show you all the code but I will give you an example:
<tr id="<?=$row['slug'];?>" class="gradeX <? if($row['parent_name']!=''){?>child<?}?>">
<td id="<?=$row['id'];?>" class="expand-parent"><? if($row['parent_name']==''){?>+<?}?></td>
<td><span id="<?=$row['id'];?>" class="edit-title"><?=$row['title'];?></td>
<td><span id="<?=$row['id'];?>" class="edit-slug"><?=$row['slug'];?></td>
<td><span id="<?=$row['id'];?>" class="edit-parent"><? if($row['parent_name']){ ?><?=$row['parent_name'];?> (ID: <?=$row['parent'];?>)<? } ?></td>
<td id="<?=$row['id'];?>" class="edit-uri"><?=$row['uri'];?></td>
<td id="<?=$row['id'];?>" class="edit-perms"><?=$row['perms'];?></td>
<td>
<div class="toggle-button" data-toggleButton-style-enabled="success">
<input type="checkbox" class="toggle-perm" id="<?=$row['id'];?>"<?=$cl;?> />
</div>
</td>
</tr>
This is in a loop, and produces a few hundred "Parent" rows, and a few thousand "Child" rows.
I have some jquery that looks like this:
$('.child').toggle();
$('.expand-parent').click(function(){
$(this).closest(".child").toggle();
});
Basically what I am trying to do is once you trigger the .expand-parent click function, it will toggle (show) the children belonging to the parent which was clicked. What would be the best way to tell jQuery which tr children belong to each tr parent and toggle accordingly?
EDIT
HTML Example Output:
<!-- Table row -->
<tr id="pp" class="gradeX ">
<td id="1" class="expand-parent">+</td>
<td><span id="1" class="edit-title">Prospector</td>
<td><span id="1" class="edit-slug">pp</td>
<td><span id="1" class="edit-parent"></td>
<td id="1" class="edit-uri"></td>
<td id="1" class="edit-perms"></td>
<td>
<div class="toggle-button" data-toggleButton-style-enabled="success">
<input type="checkbox" class="toggle-perm" id="1" checked />
</div>
</td>
</tr>
<!-- // Table row END -->
<!-- Table row -->
<tr id="pp_data_providers" class="gradeX child">
<td id="2" class="expand-parent"></td>
<td><span id="2" class="edit-title">Data Providers</td>
<td><span id="2" class="edit-slug">pp_data_providers</td>
<td><span id="2" class="edit-parent">Prospector (ID: 1)</td>
<td id="2" class="edit-uri">/plugins/plg_prospector/prospect_providers.php</td>
<td id="2" class="edit-perms"></td>
<td>
<div class="toggle-button" data-toggleButton-style-enabled="success">
<input type="checkbox" class="toggle-perm" id="2" checked />
</div>
</td>
</tr>
<!-- // Table row END -->
<!-- Table row -->
<tr id="pp_provider_lists" class="gradeX child">
<td id="3" class="expand-parent"></td>
<td><span id="3" class="edit-title">Provider Lists</td>
<td><span id="3" class="edit-slug">pp_provider_lists</td>
<td><span id="3" class="edit-parent">Prospector (ID: 1)</td>
<td id="3" class="edit-uri">/plugins/plg_prospector/prospect_lists.php</td>
<td id="3" class="edit-perms"></td>
<td>
<div class="toggle-button" data-toggleButton-style-enabled="success">
<input type="checkbox" class="toggle-perm" id="3" checked />
</div>
</td>
</tr>
<!-- // Table row END -->
<!-- Table row -->
<tr id="pp_partners" class="gradeX child">
<td id="4" class="expand-parent"></td>
<td><span id="4" class="edit-title">Partners</td>
<td><span id="4" class="edit-slug">pp_partners</td>
<td><span id="4" class="edit-parent">Prospector (ID: 1)</td>
<td id="4" class="edit-uri">/plugins/plg_prospector/prospect_partners.php</td>
<td id="4" class="edit-perms"></td>
<td>
<div class="toggle-button" data-toggleButton-style-enabled="success">
<input type="checkbox" class="toggle-perm" id="4" checked />
</div>
</td>
</tr>
<!-- // Table row END -->
<!-- Table row -->
<tr id="pp_reporting" class="gradeX child">
<td id="5" class="expand-parent"></td>
<td><span id="5" class="edit-title">Reporting</td>
<td><span id="5" class="edit-slug">pp_reporting</td>
<td><span id="5" class="edit-parent">Prospector (ID: 1)</td>
<td id="5" class="edit-uri"></td>
<td id="5" class="edit-perms"></td>
<td>
<div class="toggle-button" data-toggleButton-style-enabled="success">
<input type="checkbox" class="toggle-perm" id="5" />
</div>
</td>
</tr>
<!-- // Table row END -->
<!-- Table row -->
<tr id="pp_campaigns" class="gradeX child">
<td id="6" class="expand-parent"></td>
<td><span id="6" class="edit-title">Campaigns</td>
<td><span id="6" class="edit-slug">pp_campaigns</td>
<td><span id="6" class="edit-parent">Prospector (ID: 1)</td>
<td id="6" class="edit-uri">/plugins/plg_prospector/prospect_campaigns.php</td>
<td id="6" class="edit-perms"></td>
<td>
<div class="toggle-button" data-toggleButton-style-enabled="success">
<input type="checkbox" class="toggle-perm" id="6" checked />
</div>
</td>
</tr>
<!-- // Table row END -->
<!-- Table row -->
<tr id="cbm" class="gradeX ">
<td id="7" class="expand-parent">+</td>
<td><span id="7" class="edit-title">CBM</td>
<td><span id="7" class="edit-slug">cbm</td>
<td><span id="7" class="edit-parent"></td>
<td id="7" class="edit-uri"></td>
<td id="7" class="edit-perms"></td>
<td>
<div class="toggle-button" data-toggleButton-style-enabled="success">
<input type="checkbox" class="toggle-perm" id="7" checked />
</div>
</td>
</tr>
<!-- // Table row END -->
On rows which have a parent I would add an attribute containing the parent id.
Example:
<tr id="cbm" class="gradeX" data-parentid="1">
Then you can write the jQuery event like this:
var $this = $(this);
var id = $this.attr('id');
$(this).parents('table').find('tr[data-parentid='+id+']').toggle();
Notes: parents('table') to traverse to the table element find(..) locate all tr elements with the attribute data-parentid set to id.
It's illegal to have multiple elements with the same id so I would get rid of them. The cleanest way would be to move it to the tr element.