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.


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.