Show Hide Specific Children in Table
Hi there.. i have multiple tables on my page. each table has a wrapper with a show / hide button. I need this to independantly work with each table block to show and hide rows with a specific class.. Below is an example to where i have gotten so far.
-
<script type="text/javascript">
$(document).ready(function() {
$('.ICS_Artist_Hide').hide();
$('#ICS_Tabs').tabs({ cookie: { expires: 30} });
$('.ICSShow').toggle(function() {
$(this).addClass("active");
}, function() {
$(this).removeClass("active");
});
$('.ICSShow').click(function() {
$(this).next('.ICS_BlueTable').toggle();
});
});
</script>
<style type="text/css">
.ICSShow
{
background-image:url('../../Style Library/UMI/Styles/Images/Artist/plus.png');
height:24px;
width:24px;
}
.ICSShow.active
{
background-image:url('../../Style Library/UMI/Styles/Images/Artist/minus.png');
}
.toggle_container
{
margin:10px;
}
</style>
<div class="toggle_container">
<div class="ICSShow"></div>
<table cellpadding="0" cellspacing="0" border="0" class="ICS_BlueTable">
<tr>
<th>HEader</th>
</tr>
<tr class="ICS_Artist_ShowAll">
<td>Content</td>
</tr>
<tr class="ICS_Artist_ShowAll">
<td>Content</td>
</tr>
<tr class="ICS_Artist_ShowAll">
<td>Content</td>
</tr>
<tr class="ICS_Artist_ShowAll">
<td>Content</td>
</tr>
<tr class="ICS_Artist_ShowAll">
<td>Content</td>
</tr>
<tr class="ICS_Artist_ShowAll ICS_Artist_Hide">
<td>Content</td>
</tr>
<tr class="ICS_Artist_ShowAll ICS_Artist_Hide">
<td>Content</td>
</tr>
<tr class="ICS_Artist_ShowAll ICS_Artist_Hide">
<td>Content</td>
</tr>
<tr class="ICS_Artist_ShowAll ICS_Artist_Hide">
<td>Content</td>
</tr>
<tr class="ICS_Artist_ShowAll ICS_Artist_Hide">
<td>Content</td>
</tr>
</table>
</div>
<div class="toggle_container">
<div class="ICSShow"></div>
<table cellpadding="0" cellspacing="0" border="0" class="ICS_BlueTable">
<tr>
<th>HEader</th>
</tr>
<tr class="ICS_Artist_ShowAll">
<td>Content</td>
</tr>
<tr class="ICS_Artist_ShowAll">
<td>Content</td>
</tr>
<tr class="ICS_Artist_ShowAll">
<td>Content</td>
</tr>
<tr class="ICS_Artist_ShowAll">
<td>Content</td>
</tr>
<tr class="ICS_Artist_ShowAll">
<td>Content</td>
</tr>
<tr class="ICS_Artist_ShowAll ICS_Artist_Hide">
<td>Content</td>
</tr>
<tr class="ICS_Artist_ShowAll ICS_Artist_Hide">
<td>Content</td>
</tr>
<tr class="ICS_Artist_ShowAll ICS_Artist_Hide">
<td>Content</td>
</tr>
<tr class="ICS_Artist_ShowAll ICS_Artist_Hide">
<td>Content</td>
</tr>
<tr class="ICS_Artist_ShowAll ICS_Artist_Hide">
<td>Content</td>
</tr>
</table>
</div>
at the moment i can only hide and show all the children of all instances..i ihave tried to chain the code up like this
-
$('.ICSShow').click(function() {
$(this).next('.ICS_BlueTable').children('ICS_Artist_Hide').toggle();
});
but with no luck..can someone assit me please :)