Advanced Search

Return to Snippet

Revision: 23965
at February 17, 2010 17:33 by vagrantradio
Updated Code 
//html markup
<tr class="note_parent">
<td><a href="#"><img src="your toggle image" alt="toggle" style="display:none;" /></a></td>
</tr>

<tr class="add_note" style="display:none;">
<td>hidden content</td>
</tr>

//jQuery functions
$("tr.note_parent").hover(function() {
		$(this).find("a img").css("display", "inline");
	},
	function() {
		$(this).find("a img").css("display", "none");
});
$("tr.note_parent a img").click(function() {											 
  $(this).parents("tr:first").next("tr.add_note").css("display", "table-row");		
		return false;
});

Revision: 23964
at February 17, 2010 17:32 by vagrantradio
Initial Code 
//html markup
<tr class="note_parent">
<td><a href="#"><img src="your toggle image" alt="toggle" /></a></td>
</tr>

<tr class="add_note" style="display:none;">
<td>hidden content</td>
</tr>

//jQuery functions
$("tr.note_parent").hover(function() {
		$(this).find("a img").css("display", "inline");
	},
	function() {
		$(this).find("a img").css("display", "none");
});
$("tr.note_parent a img").click(function() {											 
  $(this).parents("tr:first").next("tr.add_note").css("display", "table-row");		
		return false;
});
Initial URL 









Initial Description





This displays an add/edit image link upon hover of the first table row and toggles the next table row on click.









Initial Title





Toggle next table row with image in previous row









Initial Tags














Initial Language





jQuery