如何将表列隐藏在特定标题下？

<div class="panel">
  <div class="panel-heading">标题1</div>
  <div class="panel-content">
    <table>
      <!-- 表列内容 -->
    </table>
  </div>
</div>

<div class="panel">
  <div class="panel-heading">标题2</div>
  <div class="panel-content">
    <table>
      <!-- 表列内容 -->
    </table>
  </div>
</div>

.panel-heading {
  cursor: pointer;
  background-color: #f5f5f5;
  padding: 10px;
}

.panel-content {
  display: none;
  padding: 10px;
}

const panels = document.querySelectorAll('.panel');

panels.forEach(panel => {
  const heading = panel.querySelector('.panel-heading');
  const content = panel.querySelector('.panel-content');

  heading.addEventListener('click', () => {
    content.style.display = (content.style.display === 'none') ? 'block' : 'none';
  });
});