javascript - hiding inner tables with JQuery -
i'm trying hide inner table jquery element triggers hiding in parent table. here's code:
<html> <head> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> </head> <body> <script type="text/javascript"> $(function() { $(".collapsible").click(function(event) { event.preventdefault(); inner = $(this).find(".inner"); if($(inner).is(":visible") == true) { alert("hiding"); $(inner).hide("slow"); } else { alert("showing"); $(inner).show("slow"); } }); $(".inner").each(function(index, element) { $(this).hide(0); }); }); </script> <table class='outer'> <tr><td><a class='collapsible' href='#'>click here</a></td></tr> <tr><table class='inner'> <tr><td>thing</td></tr><tr><td>another thing</td></tr> </table> </table> <table class='outer'> <tr><td><a class='collapsible' href='#'>click here</a></td></tr> <tr><table class='inner'> <tr><td>something else</td></tr><tr><td>another else</td></tr> </table> </table> </body> </html>
does know why clicking on "click here" not make inner table show? in advance
because .find()
looking within .collapsible
anchor. need step parent table first use .find()
correctly:
$(this).closest("table.outer").find("table.inner");
your whole code can simplified to:
$(function() { $(".collapsible").click(function(event) { event.preventdefault(); $(this).closest("table.outer").find("table.inner").toggle('slow'); }); $(".inner").hide(); });
Comments
Post a Comment