Div inside a TD triggered by a different TR
I've been trying to figure out jquery for awhile.
The problem is as follows:
Have one row of a TR trigger the TR below it with a colspan of 13 to show the additional description.
I learned that jquery and colspan don't get along too well so based off other posts I knew to put a div inside the td. The snipped code is:
-
<div id="mapsearch">
<table width="610" border="0" cellpadding="0" cellspacing="0" id="myTable">
<thead>
<th align="left" valign="bottom"><strong>Name</strong></th>
<th width="25" align="center" class="feat"><img src="/images/mapsearch/topo.png" alt="Topo Included" width="16" height="78" /></th>
<th width="25" align="center" class="feat"><img src="/images/mapsearch/roads.png" alt="Roads Included" width="16" height="78" /></th>
<th width="25" align="center" class="feat"><img src="/images/mapsearch/trails.png" alt="Trails Included" width="16" height="78" /></th>
<th width="25" align="center" class="feat"><img src="/images/mapsearch/poi.png" alt="POIs Included" width="16" height="78" /></th>
<th width="25" align="center" class="feat"><img src="/images/mapsearch/marine.png" alt="Marine Data Included" width="16" height="78" /></th>
<th width="25" align="center" class="feat"><img src="/images/mapsearch/transparent.png" alt="Transparent Map" width="16" height="78" /></th>
<th width="25" align="center" class="feat"><img src="/images/mapsearch/raster.png" alt="Raster-based Map" width="16" height="78" /></th>
<th width="25" align="center" class="feat"><img src="/images/mapsearch/garmin.png" alt="Garmin Compatible" width="25" height="78" /></th>
<th width="25" align="center" class="feat"><img src="/images/mapsearch/pc.png" alt="PC Version" width="16" height="78" /></th>
<th width="25" align="center" class="feat"><img src="/images/mapsearch/mac.png" alt="Mac Version" width="16" height="78" /></th>
<th width="25" align="center" class="feat"><img src="/images/mapsearch/install.png" alt="EZ Installer Available" width="16" height="78" /></th>
<th width="25" align="center" class="feat"><img src="/images/mapsearch/free.png" alt="Free" width="16" height="78" /></th>
</thead>
<tbody>
<tr class="altrow"><td>Afghanistan Streets</a></td>
<td align="center" class="feat">-</td>
<td align="center" class="feat"><img src="/images/mapsearch/yes.png" width="18" height="18" alt="Yes" title="Yes">
</td>
<td align="center" class="feat">-</td>
<td align="center" class="feat"><img src="/images/mapsearch/yes.png" width="18" height="18" alt="Yes" title="Yes">
</td>
<td align="center" class="feat">-</td>
<td align="center" class="feat">-</td>
<td align="center" class="feat">-</td>
<td align="center" class="feat"><img src="/images/mapsearch/yes.png" width="18" height="18" alt="Yes" title="Yes">
</td>
<td align="center" class="feat"><img src="/images/mapsearch/yes.png" width="18" height="18" alt="Yes" title="Yes">
</td>
<td align="center" class="feat"><img src="/images/mapsearch/yes.png" width="18" height="18" alt="Yes" title="Yes">
</td>
<td align="center" class="feat"><img src="/images/mapsearch/yes.png" width="18" height="18" alt="Yes" title="Yes">
</td>
<td align="center" class="feat"><img src="/images/mapsearch/yes.png" width="18" height="18" alt="Yes" title="Yes">
</td>
</tr>
<tr>
<td colspan="13"><div class="mapsearchinfo">Street map with routing and points of interest of Afghanistan.</div></td></tr>
</tbody>
</table>
</div>
So, as you can see I want to show and hide the div with the class="mapsearchinfo".
This is what I have so far and its not working (it hides just fine, and will do an alert on click so I know its something with showing where the div is):
-
$(document).ready(function(){
$('div.mapsearchinfo').hide();
$('#mapsearch tr').click(function() {
$(this).next().siblings('div.mapsearchinfo').slideToggle('fast')
.siblings('div.mapsearchinfo:visible').slideUp('fast');
});
});
As you can see I'm trying to show the div below what has been clicked (with a toggle in case it needs to be closed) and also close any other open ones.
Any help you all can offer would be much appreciated.
For now the full scale testing is occurring at
http://www.gpsfiledepot.com/test_2.php