Advanced Search

Toggle next table row with image in previous row

/ Published in: jQuery
Save to your folder(s)
This displays an add/edit image link upon hover of the first table row and toggles the next table row on click.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. //html markup
  2. <tr class="note_parent">
  3. <td><a href="#"><img src="your toggle image" alt="toggle" style="display:none;" /></a></td>
  4. </tr>
  5.  
  6. <tr class="add_note" style="display:none;">
  7. <td>hidden content</td>
  8. </tr>
  9.  
  10. //jQuery functions
  11. $("tr.note_parent").hover(function() {
  12. 		$(this).find("a img").css("display", "inline");
  13. 	},
  14. 	function() {
  15. 		$(this).find("a img").css("display", "none");
  16. });
  17. $("tr.note_parent a img").click(function() {											 
  18.   $(this).parents("tr:first").next("tr.add_note").css("display", "table-row");		
  19. 		return false;
  20. });

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.