up 0 down

Tengo una tabla y necesito a colapsar cada fila para mostrar información específica. He intentado varios métodos, pero nada parece estar funcionando. Parece muy fácil, pero no puedo hacerlo, ¿cómo puedo hacer eso?

Este es el código tr:

<tr role="row">
   <td>1</td>
   <td class="navtd"><span class="tableinfo">Curating</span></td>
   <td>The Book Affair</td>
   <td>Automatic Books</td>
   <td>2009</td>
</tr>

Y este es un método que estoy utilizando para colapsar la cabecera, que está trabajando muy bien:

var acc = document.getElementsByClassName("about");
var i;
for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = document.getElementById("aboutPanel");
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  });
}
<section class="header">


  <div class="menu">
    <table class="nav">
      <tbody>
        <tr>
          <td style="width: 5%"></td>
          <td class="navtd" style="width: 17.5%"></span>Tommaso Speretta</td>
          <td class="navtd" style="width: 35%"><span class="about"><span>About/Contact</span></span></td>
          <td style="width: 35%"></td>
          <td style="width: 7.5%"></td>
        </tr>
      </tbody>
    </table>
  </div>

  <div id="aboutPanel">
    <table>
      <tbody>
        <tr>
          <td style="width: 5%"></td>
          <td style="width: 17.5%"></td>
          <td style="width: 35%">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit id odio minima eos fugiat a aut veniam quasi in, enim quis, iure adipisci ratione, et atque velit distinctio consequuntur nisi! Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Reprehenderit id odio minima eos fugiat a aut veniam quasi in, enim quis, iure adipisci ratione, et atque velit distinctio consequuntur nisi! Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit id odio minima eos fugiat
            a aut veniam quasi in, enim quis, iure adipisci ratione, et atque velit distinctio consequuntur nisi! Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit id odio minima eos fugiat a aut veniam quasi in, enim quis, iure adipisci
            ratione, et atque velit distinctio consequuntur nisi!
          </td>
          <td style="width: 35%">
            <div><img src="img/profilepic.png" alt="Profile picture Tommaso Speretta" class="profilepic"></div>
          </td>
          <td style="width: 7.5%"></td>
        </tr>
      </tbody>
    </table>
</section>