Toggle tr when i click on specif element inside td

Question

I have this code in jquery, and inside the td I have a div called arrow when I click him I want to toggle the next tr. But this div is inside the td. I tried to use nextUntil, but he works only when I click in the whole TR, I want that work when I only click on arrow div.

        $('div.arrow').click(function(){
          $(this).nextUntil('tr.line-addendum').css('display', function(i,v){
            return this.style.display === 'table-row' ? 'none' : 'table-row';
          });
        });

        <tr class="line-validity">  
          <td class="field" nowrap> 
            <div class="arrow">
              <img src="/WebSoc/imagens/setaAudio.gif" alt="Associa" border="0">
            </div>
          </td>   
        </tr>
       <tr class="line-addendum"></tr>

So, when I click in the div arrow, I want to toggle the TR line-addendum

Answer 1

To get the next row from a td use:

 var tr = $(this).closest("tr");

to get the containing tr , then you can use tr.next() or equivalent.

Note that .nextUntil will get all the rows until the matching row (excluding the matching row). To toggle the addendum rather than rows between, you can use:

tr.nextAll(".line-addendum").first() 

to get the matching addendum. (this may not match your exact requirements, so could be expanded upon in the question)

Giving (whilst keeping as much of your original code):

 $('div.arrow').click(function() { $(this).closest("tr").nextAll('tr.line-addendum').first().css('display', function(i, v) { return this.style.display === 'table-row'? 'none': 'table-row'; }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr class="line-validity"> <td class="field" nowrap> <div class="arrow"> Associa </div> </td> </tr> <tr class="line-addendum" style='display:none'> <td>addendum</td> </tr> </table>