Как сделать аккордеон в таблице?

Question

[Smirator]

Привет всем! Нужно сделать аккордеон в таблице. На чистом JS. Гуглить умею, 90% предложенных вариантов на jquery или не подходят в плане реализации. Благодарю!
При клике на td должен создаваться tr ниже.

<tbody>
    <tr>
      <td><button class="accordion">Кликнул и создал элемент ниже</button></td>
      <td>2</td>
      <td>3</td>
    </tr>

   <tr class="panel">
      <td>Создалось после клика на td выше</td>
     <td>4</td>
   </tr>

let acc = document.getElementsByClassName("accordion");
let i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}

Answer 1

[twobomb]

Ну не создал, а открыл наверное

.panel{
  display:none;
}
.panel.active{
  display:block;
}

document.querySelectorAll(".accordion").forEach(el=>{
    el.addEventListener("click",e=>{
    	e.currentTarget.parentNode.parentNode.nextElementSibling.classList.toggle("active");
    });
});

Answer 2

[Rst0]

немного дополню ответ twobomb

<tr class="panel">
      <td colspan="2">Создалось после клика на td выше</td>  <!--  тут ячейка двойная, в таблице три колонки  -->
      <td >4</td> 
</tr>

.panel{
     display:none;
}
.panel.active{ 
     display: table-row; 
} // это ведь таблица, а не блок