html - jquery toggle one div with same class when div is not in the same code block -

i have simple problem cannot find solution this. have found many references using .parent(), .next(), .find() none of them doing expect. ether divs same class name expanding , collapsing @ same time or not work @ all.

so looking here have same class names , expand , collapse 1 click. have this:

html:

<table>   <tr>     <td><div class="expand">more details</div></td>   <tr/>   <tr>     <td>       <div class="extras" style="display:none;">         <table>           <tr><td>some data</td></tr>         </table>       </div>     </td>   </tr>   <tr>     <td><div class="expand">more details</div></td>   <tr/>   <tr>     <td>       <div class="extras" style="display:none;">         <table>           <tr><td>some data</td></tr>         </table>       </div>     </td>   </tr> </table> 

jquery:

$(".expand").click(function() {     $(".extras").toggle(); }); 

this expand , collapse of them when want on 1 clicked in "expand" div trigger below "extras" div.

$(".expand").click(function() {     $(this).closest("tr").next("tr").find(".extras").toggle(); }); 

means:

$(this)           // start here .closest("tr")    // go .next("tr")       // go next .find(".extras")  // find element .toggle();        // tha thing