Bootstrap 4:如何在几个不同的数据切换元素下显示单个可折叠元素

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>

<div class="container">
  <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" id="tab1-tab" data-toggle="tab" href="#tab1" role="tab" aria-controls="tab1" aria-selected="true">Tab 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="tab2-tab" data-toggle="tab" href="#tab2" role="tab" aria-controls="tab2" aria-selected="false">Tab 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="tab3-tab" data-toggle="tab" href="#tab3" role="tab" aria-controls="tab3" aria-selected="false">Tab 3</a>
    </li>
  </ul>
  
  <div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="tab1" role="tabpanel" aria-labelledby="tab1-tab">
      <div class="accordion" id="accordion1">
        <div class="card">
          <div class="card-header" id="heading1">
            <h5 class="mb-0">
              <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse1" aria-expanded="true" aria-controls="collapse1">
                Collapsible Item 1
              </button>
            </h5>
          </div>
          <div id="collapse1" class="collapse show" aria-labelledby="heading1" data-parent="#accordion1">
            <div class="card-body">
              Content of Collapsible Item 1
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="tab-pane fade" id="tab2" role="tabpanel" aria-labelledby="tab2-tab">
      <div class="accordion" id="accordion2">
        <div class="card">
          <div class="card-header" id="heading2">
            <h5 class="mb-0">
              <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse2" aria-expanded="true" aria-controls="collapse2">
                Collapsible Item 2
              </button>
            </h5>
          </div>
          <div id="collapse2" class="collapse show" aria-labelledby="heading2" data-parent="#accordion2">
            <div class="card-body">
              Content of Collapsible Item 2
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="tab-pane fade" id="tab3" role="tabpanel" aria-labelledby="tab3-tab">
      <div class="accordion" id="accordion3">
        <div class="card">
          <div class="card-header" id="heading3">
            <h5 class="mb-0">
              <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse3" aria-expanded="true" aria-controls="collapse3">
                Collapsible Item 3
              </button>
            </h5>
          </div>
          <div id="collapse3" class="collapse show" aria-labelledby="heading3" data-parent="#accordion3">
            <div class="card-body">
              Content of Collapsible Item 3
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>