使用bootstrap4折叠组件。
当我点击类别时，相应的可折叠部分会显示出来。如果我点击brands，我希望categories部分在brands one显示之前崩溃（反之亦然）。
此处的折叠起作用，但可以同时看到多个可折叠图元：

.view-custom-filters {
  display: flex;
}

.view-collapse-button {
  background: lightgrey;
  width: 150px;
  height: 50px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

<div id="#viewCustomFilters" class="view-custom-filters">
  <div class="view-collapse-wrap">
    <div class="view-collapse-button" role="button" data-toggle="collapse" data-target="#categories-collapsed" aria-expanded="true" aria-controls="categories-collapsed">
      Categories
    </div>
    <div class="view-collapse-content collapse" id="categories-collapsed">
      <ul>
        <li>
          <strong>All</strong>
        </li>
        <li>
          <a href="#">Link 1</a>
        </li>
        <li>
          <a href="#">Link 2</a>
        </li>
        <li>
          <a href="#">Link 3</a>
        </li>
        <li>
          <a href="#">Link 4</a>
        </li>
      </ul>
    </div>
  </div>
  <div class="view-collapse-wrap">
    <div class="view-collapse-button" role="button" data-toggle="collapse" data-target="#brands-collapsed" aria-expanded="true" aria-controls="brands-collapsed">
      Brands
    </div>
    <div class="view-collapse-content collapse" id="brands-collapsed">
      <ul>
        <li>
          <strong>All</strong>
        </li>
        <li>
          <a href="#">Link 5</a>
        </li>
        <li>
          <a href="#">Link 6</a>
        </li>
        <li>
          <a href="#">Link 7</a>
        </li>
        <li>
          <a href="#">Link 8</a>
        </li>
      </ul>
    </div>
  </div>
</div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>

我读到，为了实现我想要的，我需要一个 Package 器元素并使用 data-parent 上 .collapse 元素，但这样做时，我会得到一个错误 Uncaught TypeError: Cannot read property 'querySelectorAll' of null .

.view-custom-filters {
  display: flex;
}

.view-collapse-button {
  background: lightgrey;
  width: 150px;
  height: 50px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

<div id="#viewCustomFilters" class="view-custom-filters">
  <div class="view-collapse-wrap">
    <div class="view-collapse-button" role="button" data-toggle="collapse" data-target="#categories-collapsed" aria-expanded="true" aria-controls="categories-collapsed">
      Categories
    </div>
    <div class="view-collapse-content collapse" id="categories-collapsed" data-parent="#viewCustomFilters">
      <ul>
        <li>
          <strong>All</strong>
        </li>
        <li>
          <a href="#">Link 1</a>
        </li>
        <li>
          <a href="#">Link 2</a>
        </li>
        <li>
          <a href="#">Link 3</a>
        </li>
        <li>
          <a href="#">Link 4</a>
        </li>
      </ul>
    </div>
  </div>
  <div class="view-collapse-wrap">
    <div class="view-collapse-button" role="button" data-toggle="collapse" data-target="#brands-collapsed" aria-expanded="true" aria-controls="brands-collapsed">
      Brands
    </div>
    <div class="view-collapse-content collapse" id="brands-collapsed" data-parent="#viewCustomFilters">
      <ul>
        <li>
          <strong>All</strong>
        </li>
        <li>
          <a href="#">Link 5</a>
        </li>
        <li>
          <a href="#">Link 6</a>
        </li>
        <li>
          <a href="#">Link 7</a>
        </li>
        <li>
          <a href="#">Link 8</a>
        </li>
      </ul>
    </div>
  </div>
</div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>

如何实现一次只显示一个可折叠元素？