Help targeting an image within an anchor in jquery

amydot
amydot used Ask the Experts™
on
For some reason I have issues figuring out jQuery selectors sometimes and was wondering if someone could help me with this simple problem.

I want to do a very simple image switch from a plus to a minus sign when the link is clicked and the row below is revealed. It's always going to be the image within the link that gets changed out. Here's my code:

		$(document).ready(function(){	
			$('.expand').click(function() {
			  if( $(this).parents("tr").next("tr").hasClass('hidden')) { 
			 	 	$(this).parents("tr").next("tr").removeClass('hidden');
			  }	else { 
			  		$(this).parents("tr").next("tr").addClass('hidden');
			  } 
			  return false;
			});
		});
		
		<table cellspacing="0" cellpadding="4" border="0" width="630">
			<tr valign="top">
				<td width="10"><input type="radio" value="262" name="powervac"></td>
				<td><a class="expand" href="#">Model 12F - Triple Bag<img border="0" align="absbottom" name="Model12F-TripleBag" src="images/plus.gif"></a></td> 
				<td align="right"><span class="add_to"><i>add&nbsp;$1,853.00</i></span></td>
			</tr>
			<tr class="hidden" id="Model 12F - Triple Bag">
				<td colspan="3">
					<table cellspacing="0" cellpadding="1" border="0" width="100%">
					<tr valign="top" rel="">
						<td><input type="checkbox" checked="" value="262-503587" name="vacoptions[]"></td>
						<td width="180"><b><span style="font-size: 10px;">Mount Kits</span></b></td>
						<td><span style="font-size: 10px;">Triple Bags Model 12F Mount Kit for 700 Series </span></td><td align="right" width="30"><span style="color: rgb(51, 102, 153); font-size: 10px;"><i>$170</i></span></td></tr><tr valign="top" rel=""><td><input type="checkbox" checked="" value="262-503193" name="vacoptions[]"></td><td width="180"><b><span style="font-size: 10px;">Collectors</span></b></td><td><span style="font-size: 10px;">Model 12F Triple Bag Assembly, without mount </span></td><td align="right" width="30"><span style="color: rgb(51, 102, 153); font-size: 10px;"><i>$770</i></span></td></tr><tr valign="top" rel=""><td><input type="checkbox" checked="" value="262-503174" name="vacoptions[]"></td><td width="180"><b><span style="font-size: 10px;">Vac Assembly Kits</span></b></td><td><span style="font-size: 10px;">For 3472 Decks, Vac Assembly Drive 372 </span></td><td align="right" width="30"><span style="color: rgb(51, 102, 153); font-size: 10px;"><i>$885</i></span></td></tr><tr valign="top" rel=""><td><input type="checkbox" checked="" value="262-604327" name="vacoptions[]"></td><td width="180"><b><span style="font-size: 10px;">Misc. Vac System Components</span></b></td><td><span style="font-size: 10px;">Exhaust Deflector Kit for 700 Series Kohler engine models with all cloth-bag collection systems </span></td><td align="right" width="30"><span style="color: rgb(51, 102, 153); font-size: 10px;"><i>$28</i></span></td></tr></tbody></table></td></tr><tr valign="top" rel=""><td width="10"><input type="radio" value="265" name="powervac"></td><td><a class="expand" href="#">Model 15 - Lever - Actuator<img border="0" align="absbottom" name="Model15-Lever-Actuator" src="images/plus.gif"></a></td><td align="right"><span class="add_to"><i>add&nbsp;$2,044.00</i></span></td></tr>
					<tr class="hidden" id="Model 15 - Lever - Actuator">
						<td colspan="3">
							<table cellspacing="0" cellpadding="1" border="0" width="100%">
								<tr valign="top"><td><input type="checkbox" checked value="265-503581" name="vacoptions[]"></td><td width="180">Mount Kits</td><td>Model 15 Mount Kit for 700 &amp; 900 Series</td><td align="right" width="30"><i>$105</i></td></tr>
								<tr valign="top" rel=""><td><input type="checkbox" checked value="265-503216" name="vacoptions[]"></td><td width="180">Collectors</td><td>Model 15 Lever-Actuated Hopper, without mount, for 620T, 700 &amp; 900 Series</td><td align="right" width="30">$965</td></tr>
							</table>
						</td>
					</tr>
					</table>
			</table>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Author

Commented:
As I suspected, it was pretty simple. Let me know if there's a better solution.


			$('.expand').click(function() {
			  if( $(this).parents("tr").next("tr").hasClass('hidden')) { 
			 	 	$(this).parents("tr").next("tr").removeClass('hidden');
			 	 	$(this).children('img').attr('src', 'images/minus.gif');
			  }	else { 
			  		$(this).parents("tr").next("tr").addClass('hidden');
			  		$(this).children('img').attr('src', 'images/plus.gif');
			  } 
			  return false;
			});

Open in new window

IT Expert
Top Expert 2009
Commented:
Sounds like you might want to look at jquery TOGGLE

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial