I’m creating some html dynamically from an asp.net page and filling out a list of tables with links.
The behavior i’m looking for is hiding the images in the following rows when i click on the first element in the table, without hiding all the images in the rest of the table.
the jquery code i’m using is:
$(document).ready(function () { $('.AddMainInterest').click(function (event) { var url = $(this).attr("href"); if ($.browser.msie) {//hacked together for IE browsers centeredY = (window.screenTop - 120) + ((((document.documentElement.clientHeight + 120) / 2) - (75))); centeredX = window.screenLeft + ((((document.body.offsetWidth + 20) / 2) - (150))); } else { centeredY = window.screenY + (((window.outerHeight / 2) - (75))); centeredX = window.screenX + (((window.outerWidth / 2) - (150))); } window.open(url, null, 'toolbar=no,location=no,menubar=no,width=300,height=150,resizable=yes,scrollbars=no,left=' + centeredX + ',top=' + centeredY).focus(); event.preventDefault(); this.href = this.href.replace("act=a", "act=d"); $(this).prev().toggle(); $("#imgInterest img").hide().filter(":first").show(); }); });
but this is hiding all the following images, how can i make hide only the images in the same table???
the code looks something like the following:
<table id="imgInterest" width="100%;">
<tr>
<td>
<a href="~/page.aspx?uid=-1&pid=10&sid=2&sc=Y&act=a" class="AddMainInterest">
<img id="first" src="~/icons/CheckMark.png" class="first">Agriculture (General)</a>
</td>
</tr>
<tr valign="middle">
<td>
<a href="~/page.aspx" class="AddInterest">Agricultural Facilities and Equipments</a><img
src="~/icons/CheckMark.png" class="img-swap">
</td>
<td>
<a href="~/page.aspx?uid=-1&pid=10&sid=4&sc=Y01&act=a" class="AddInterest">Agricultural
Science</a><img src="~/icons/CheckMark.png" class="img-swap">
</td>
</tr>
<tr>
<td>
<a href="~/page.aspx?uid=-1&pid=10&sid=5&sc=Y02&act=a" class="AddInterest">Algology</a><img
src="~/icons/CheckMark.png" class="img-swap">
</td>
<td>
<a href="~/page.aspx?uid=-1&pid=10&sid=6&sc=Y03&act=a" class="AddInterest">Animal Behavior</a><img
src="~/icons/CheckMark.png" class="img-swap">
</td>
</tr>
<tr>
<td>
<a href="~/page.aspx?uid=-1&pid=10&sid=7&sc=Y07&act=a" class="AddInterest">Animal Health
and Nutrition</a><img src="~/icons/CheckMark.png" class="img-swap">
</td>
<td>
<a href="~/page.aspx?uid=-1&pid=10&sid=8&sc=Y04&act=a" class="AddInterest">Animal Physiology</a><img
src="~/icons/CheckMark.png" class="img-swap">
</td>
</tr>
<tr>
<td>
<a href="~/page.aspx?uid=-1&pid=10&sid=9&sc=Y08&act=a" class="AddInterest">Aquaculture
and Fisheries</a><img src="~/icons/CheckMark.png" class="img-swap">
</td>
<td>
<a href="~/page.aspx?uid=-1&pid=10&sid=10&sc=Y09&act=a" class="AddInterest">Crop and
Plant Production</a><img src="~/icons/CheckMark.png" class="img-swap">
</td>
</tr>
<tr>
<td>
<a href="~/page.aspx?uid=-1&pid=10&sid=11&sc=Y05&act=a" class="AddInterest">Forestry
Science</a><img src="~/icons/CheckMark.png" class="img-swap">
</td>
<td>
<a href="~/page.aspx?uid=-1&pid=10&sid=12&sc=Y10&act=a" class="AddInterest">Pesticides,
Insecticides and Herbicides</a><img src="~/icons/CheckMark.png" class="img-swap">
</td>
</tr>
<tr>
<td>
<a href="~/page.aspx?uid=-1&pid=10&sid=13&sc=Y12&act=a" class="AddInterest">Plant Sciences</a><img
src="~/icons/CheckMark.png" class="img-swap">
</td>
<td>
<a href="~/page.aspx?uid=-1&pid=10&sid=14&sc=Y11&act=a" class="AddInterest">Policy,
Reviews and Evaluations</a><img src="~/icons/CheckMark.png" class="img-swap">
</td>
</tr>
<tr>
<td>
<a href="~/page.aspx?uid=-1&pid=10&sid=15&sc=Y13&act=a" class="AddInterest">Soil Sciences</a><img
src="~/icons/CheckMark.png" class="img-swap">
</td>
<td>
<a href="~/page.aspx?uid=-1&pid=10&sid=16&sc=Y14&act=a" class="AddInterest">Zoology
and Animal Science</a><img src="~/icons/CheckMark.png" class="img-swap">
</td>
<td>
</td>
</tr>
</table>
</li><li>
<table id="imgInterest" width="100%;">
<tr>
<td>
<a href="~/page.aspx?uid=-1&pid=10&sid=17&sc=A&act=a" class="AddMainInterest">
<img id="first" src="~/icons/CheckMark.png" class="first">Arts and Literature (General)</a>
</td>
</tr>
<tr valign="middle">
<td>
<a href="~/page.aspx?uid=-1&pid=10&sid=18&sc=A01&act=a" class="AddInterest">Architecture</a><img
src="~/icons/CheckMark.png" class="img-swap">
</td>
<td>
<a href="~/page.aspx?uid=-1&pid=10&sid=19&sc=A02&act=a" class="AddInterest">Art History</a><img
src="~/icons/CheckMark.png" class="img-swap">
</td>
</tr>
<tr>
<td>
<a href="~/page.aspx?uid=-1&pid=10&sid=20&sc=A03&act=a" class="AddInterest">Children's
Literature</a><img src="~/icons/CheckMark.png" class="img-swap">
</td>
<td>
<a href="~/page.aspx?uid=-1&pid=10&sid=21&sc=A04&act=a" class="AddInterest">Culture
Heritage</a><img src="~/icons/CheckMark.png" class="img-swap">
</td>
</tr>
<tr>
<td>
<a href="~/page.aspx?uid=-1&pid=10&sid=22&sc=A05&act=a" class="AddInterest">Folklore</a><img
src="~/icons/CheckMark.png" class="img-swap">
</td>
<td>
<a href="~/page.aspx?uid=-1&pid=10&sid=23&sc=A06&act=a" class="AddInterest">Latin</a><img
src="~/icons/CheckMark.png" class="img-swap">
</td>
</tr>
<tr>
<td>
<a href="~/page.aspx?uid=-1&pid=10&sid=24&sc=A07&act=a" class="AddInterest">Literature</a><img
src="~/icons/CheckMark.png" class="img-swap">
</td>
<td>
<a href="~/page.aspx?uid=-1&pid=10&sid=25&sc=A08&act=a" class="AddInterest">Music</a><img
src="~/icons/CheckMark.png" class="img-swap">
</td>
</tr>
<tr>
<td>
<a href="~/page.aspx?uid=-1&pid=10&sid=26&sc=A09&act=a" class="AddInterest">Visual and
Performing Arts</a><img src="~/icons/CheckMark.png" class="img-swap">
</td>
<tr id="clear">
<td>
</td>
</tr>
</tr>
</table>
</li>
<li>
<table id="imgInterest" width="100%;">
<tr>
<td>
<a href="~/page.aspx?uid=-1&pid=10&sid=27&sc=B&act=a" class="AddMainInterest">
<img id="first" src="~/icons/CheckMark.png" class="first">Astronomy/Astrophysics/Space
Science (General)</a>
</td>
</tr>
<tr valign="middle">
<td>
<a href="~/page.aspx?uid=-1&pid=10&sid=543&sc=B10&act=a" class="AddInterest">Aircrafy
and Flight</a><img src="~/icons/CheckMark.png" class="img-swap">
</td>
<td>
<a href="~/page.aspx?uid=-1&pid=10&sid=544&sc=B11&act=a" class="AddInterest">Astronomy
and Astrophysics</a><img src="~/icons/CheckMark.png" class="img-swap">
</td>
</tr>
<tr>
<td>
<a href="~/page.aspx?uid=-1&pid=10&sid=28&sc=B01&act=a" class="AddInterest">Celestial
Mechanics</a><img src="~/icons/CheckMark.png" class="img-swap">
</td>
<td>
<a href="~/page.aspx?uid=-1&pid=10&sid=29&sc=B02&act=a" class="AddInterest">Cosmology</a><img
src="~/icons/CheckMark.png" class="img-swap">
</td>
</tr>
<tr>
<td>
<a href="~/page.aspx?uid=-1&pid=10&sid=30&sc=B03&act=a" class="AddInterest">Extragalactic
Astronomy</a><img src="~/icons/CheckMark.png" class="img-swap">
</td>
<td>
<a href="~/page.aspx?uid=-1&pid=10&sid=31&sc=B04&act=a" class="AddInterest">Interstellar
Matter</a><img src="~/icons/CheckMark.png" class="img-swap">
</td>
</tr>
<tr>
<td>
<a href="~/page.aspx?uid=-1&pid=10&sid=32&sc=B05&act=a" class="AddInterest">Meteors</a><img
src="~/icons/CheckMark.png" class="img-swap">
</td>
<td>
<a href="~/page.aspx?uid=-1&pid=10&sid=545&sc=B12&act=a" class="AddInterest">Policy,
Reviews and Evaluations</a><img src="~/icons/CheckMark.png" class="img-swap">
</td>
</tr>
<tr>
<td>
<a href="~/page.aspx?uid=-1&pid=10&sid=33&sc=B06&act=a" class="AddInterest">Solar Terrestrial
Physics</a><img src="~/icons/CheckMark.png" class="img-swap">
</td>
<td>
<a href="~/page.aspx?uid=-1&pid=10&sid=546&sc=B13&act=a" class="AddInterest">Space Exploration
and Development</a><img src="~/icons/CheckMark.png" class="img-swap">
</td>
</tr>
<tr>
<td>
<a href="~/page.aspx?uid=-1&pid=10&sid=547&sc=B14&act=a" class="AddInterest">Space Systems
and Hardware</a><img src="~/icons/CheckMark.png" class="img-swap">
</td>
<td>
<a href="~/page.aspx?uid=-1&pid=10&sid=34&sc=B07&act=a" class="AddInterest">Stars</a><img
src="~/icons/CheckMark.png" class="img-swap">
</td>
</tr>
<tr>
<td>
<a href="~/page.aspx?uid=-1&pid=10&sid=35&sc=B08&act=a" class="AddInterest">The Sun</a><img
src="~/icons/CheckMark.png" class="img-swap">
</td>
<td>
<a href="~/page.aspx?uid=-1&pid=10&sid=36&sc=B09&act=a" class="AddInterest">Theoretical
Astrophysics</a><img src="~/icons/CheckMark.png" class="img-swap">
</td>
<td>
</td>
</tr>
</table>
change
to
By the way, don’t let different tables share same ID