javascript - Showing/Hiding DOM for only one element -

i have multiple elements this:

<tr class="class1"> ... </tr> <tr class="class1"> ... </tr> <tr class="class1"> ... </tr> <tr class="class1"> ... </tr> 

etc. want request dom this:

dom.query(".class1").live("click", function() {     if (dom.query("#div1insideclass1").is(':visible')) {         dom.query("#div1insideclass1").hide();         ...     } else {         dom.query("#div1insideclass1").show();         ...     } }); 

but way function works function every single instance of above, every instance of #div1insideclass1. there way detect particular tr element clicked on? heard .next() function helps, i'm not sure.

you have root problem: there can't duplicated ids on html. you'll need address first of all.

assuming add css class divs named div1insideclass1, should trick

$(".class1").live("click", function() {     $(this).find('.div1insideclass1').toggle(); }); 

if need keep using if statement, code equivalent allows add logic within if else

$(".class1").live("click", function() {     var $this = $(this);     var $div = $this.find('.div1insideclass1');     if ($div.is(':visible')) {         $div.hide();         ...     } else {         $div.show();         ...     } });