toggle class und next() eines anderen Tags

[sanktusm]

Hallo,
ich möchte ein Accordeon realisieren, dass ich bereits im Netz gefunden habe: nur muss ich aber Tabellen einsetzen mit folgendem Code:

table.panel {
    width: 100%;
    display: none;
    overflow: hidden;
    
} 

<script type="text/javascript">
   var acc = document.getElementsByClassName("accordion");

    var i;
         
    for (i = 0; i < acc.length; i++) {
        acc[i].addEventListener("click", function() {
            /* Toggle between adding and removing the "active" class,
            to highlight the button that controls the panel */
            this.classList.toggle("activeZ-Akkordeon");
                         
            /* Toggle between hiding and showing the active panel */
           $(this).next().find('.panel').toggleClass("open");
                                    
                                          
        });
    } 

</script>   

//html
<table>
<tr class="accordion productLayer"><td colspan="5"><h4>Kantteile</h4></td></tr>
       
<table class="panel"><tr><td> //tabelle in tabelle (panel des accordeons
   
    <tr class="product_28015">
  
  
    <td data-label="Zubehör">
  
  
                 <strong>AKR Rinneneinlaufblech aus Aluminium, Länge 2000mm</strong>
   
                        mit Rückseitenschutzlack, Farbig  
       
  
      </td>
      <td data-label="Packetumfang/Preisgebung">


      </td>
      <td data-label="Menge">
   

      </td>
     <td data-label="Preis"></td>
  
     <td data-label="Details"><a href="?id=83" target="blank">Details</a></td> 

</tr>
</td></tr></table>

</table> 

Nun liegt das Problem für die ToggleClasse den Spung von "accordeo" (this) auf class Panel zu realiseren. Hat jemand eine Idee wie man das machen könnte?

[s4ty]

Was meinst du mit Sprung realisieren? Könntest du das bitte nochmal anders formulieren?

Ich bin ja generell ein Freund davon, dass wenn man jQuery verwendet, es auch nur mit jQuery schreibt und nicht anfängt events Klassisch zu binden.
Das bedeutet:

   var acc = document.getElementsByClassName("accordion");

    var i;
         
    for (i = 0; i < acc.length; i++) {
        acc[i].addEventListener("click", function() {
            /* Toggle between adding and removing the "active" class,
            to highlight the button that controls the panel */
            this.classList.toggle("activeZ-Akkordeon");
                         
            /* Toggle between hiding and showing the active panel */
           $(this).next().find('.panel').toggleClass("open");
                                    
                                          
        });
    } 

Kannst du auch einfach so schreiben, tut genau das selbe nur halt reines jQuery:

$('.accordion').click(function () {
  $(this)
    .toggleClass('activeZ-Akkordeon')
    .next()
    .find('.panel');
}); 

Du brauchst auch keine Schleife dafür.

[sanktusm]

So funktionierte es sehr gut, vielen Dank für die Hilfe!!!!
<script type="text/javascript">
   $('.accordion').click(function () {
  $(this).toggleClass('activeZ-Akkordeon');
    
  $(this).closest('table').next('.accPanel').toggleClass("openEq");
    
});  

</script>