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

Popular posts from this blog

javascript - Enclosure Memory Copies -

php - Replacing tags in braces, even nested tags, with regex -