可折叠网格

Question

我的可折叠Griditems正在折叠其行中的每个项目。 有什么想法可以使它像没有<div class"row"></div>的以下代码一样起作用？

var coll = document.getElementsByClassName("content-title");
var i;
for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var collapsing = this.nextElementSibling;
    if (collapsing.style.maxHeight) {
      collapsing.style.maxHeight = null;
    } else {
      collapsing.style.maxHeight = collapsing.scrollHeight + "px";
    }
  });
}

.content-title {
  position: relative;
  left: 20px;
}

.content {
  position: relative;
  left: 17px;
  top: -20px;
}

.collapsing {
  overflow: hidden;
  transition: max-height 0.25s ease-out;
  max-height: 0;
}

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-column-gap: 50px;
}

.grid-item {
  margin-top: 100px;
  background-color: #1544a3;
}

<div class="grid-container">
  <div class="row">
    <div class="grid-item">
      <h2 class="content-title">stuff</h2>
      <div class="collapsing">
        <br>
        <table>
          <tr>
            <td>
              <a class="content">stuff1</a>
            </td>
          </tr>
          <tr>
            <td>
              <a class="content">stuff2</a>
            </td>
          </tr>
          <tr>
            <td>
              <a class="content">stuff3</a>
            </td>
          </tr>
          <tr>
            <td>
              <a class="content">stuff4</a>
            </td>
          </tr>
          <tr>
            <td>
              <a class="content">stuff5</a>
            </td>
          </tr>
        </table>
      </div>
    </div>
    <div class="grid-item">
      <h2 class="content-title">stuff</h2>
      <div class="collapsing">
        <br>
        <table>
          <tr>
            <td>
              <a class="content">stuff1</a>
            </td>
          </tr>
          <tr>
            <td>
              <a class="content">stuff2</a>
            </td>
          </tr>
          <tr>
            <td>
              <a class="content">stuff3</a>
            </td>
          </tr>
          <tr>
            <td>
              <a class="content">stuff4</a>
            </td>
          </tr>
          <tr>
            <td>
              <a class="content">stuff5</a>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="grid-item">
      <h2 class="content-title">stuff</h2>
      <div class="collapsing">
        <br>
        <table>
          <tr>
            <td>
              <a class="content">stuff1</a>
            </td>
          </tr>
          <tr>
            <td>
              <a class="content">stuff2</a>
            </td>
          </tr>
          <tr>
            <td>
              <a class="content">stuff3</a>
            </td>
          </tr>
          <tr>
            <td>
              <a class="content">stuff4</a>
            </td>
          </tr>
          <tr>
            <td>
              <a class="content">stuff5</a>
            </td>
          </tr>
        </table>
      </div>
    </div>
    <div class="grid-item">
      <h2 class="content-title">stuff</h2>
      <div class="collapsing">
        <br>
        <table>
          <tr>
            <td>
              <a class="content">stuff1</a>
            </td>
          </tr>
          <tr>
            <td>
              <a class="content">stuff2</a>
            </td>
          </tr>
          <tr>
            <td>
              <a class="content">stuff3</a>
            </td>
          </tr>
          <tr>
            <td>
              <a class="content">stuff4</a>
            </td>
          </tr>
          <tr>
            <td>
              <a class="content">stuff5</a>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</div>

还有一种方法可以在打开另一个项目时关闭其他项目？ 还是在打开动画时使用折叠或推开其他盒子的方式使盒子在打开时扩展？