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 -->