/ Published in: jQuery
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
//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; });