Bootstrap 4 如何确保一次只能工作一个塌陷？

我有以下代码，在

li

中按我的文本将打开右侧的图像，并使其下方的文本显示出来。当前，如果我按2

li

，它下面的两个文本都将显示。但是，我一次只想在下面打开一个文本。没有任何javascript，只使用collapse或bootstrap类，如何做到这一点

<div class="col-12 col-md-6 my-auto text-left">
  <ul>
    <li><a data-toggle="tab" href="#offer">
       <h3 data-toggle="collapse" data-target="#offerText" aria-expanded="true" aria-controls="collapseOne">Offer</h3></a>
       <h5 id="offerText" class="collapse font-weight-normal my-4">Sample offer</h5>
    </li>
    <li><a data-toggle="tab" href="#find">
      <h3 data-toggle="collapse" data-target="#findText">Find</h3></a>
      <h5 id="findText" class="collapse font-weight-normal my-4">Sample find</h5>
    </li>
    <li><a data-toggle="tab" href="#submit">
      <h3 data-toggle="collapse" data-target="#submitText">Submit</h3></a>
      <h5 id="submitText" class="collapse font-weight-normal my-4">To submit</h5>
    </li>
    <li><a data-toggle="tab" href="#getPaid">
      <h3 data-toggle="collapse" data-target="#paidText">Get paid</h3></a>
      <h5 id="paidText" class="collapse font-weight-normal my-4">Sample paid</h5>
    </li>
  </ul>                
</div>

<div class="tab-content col-12 col-md-6 my-auto">
  <div id="offer" class="tab-pane fade in active">
    <div class="col-md-6 my-auto">
      <img class="d-none d-lg-block img-small" src="assets/images/offer.svg" alt="">
    </div>
  </div>
  <div id="find" class="tab-pane fade">
    <div class="col-md-6 my-auto">
      <img class="d-none d-lg-block img-small" src="assets/images/find.svg" alt="">
    </div>
  </div>
  <div id="submit" class="tab-pane fade">
    <div class="col-md-6 my-auto">
      <img class="d-none d-lg-block img-small" src="assets/images/submit.svg" alt="">
    </div>
  </div>
  <div id="getPaid" class="tab-pane fade">
    <div class="col-md-6 my-auto">
      <img class="d-none d-lg-block img-small" src="assets/images/get-paid.svg" alt="">
    </div>
  </div>
</div> 

样品报价


样本发现


屈从


样品付费

您可以在

折叠

容器上使用

数据父项

，以实现一致的功能

更改您的

中的：

• 添加一个ID
• 将第一项的

  aria expanded

  设置为

  false

• 在

  .collapse

  容器上将

  数据父项设置为您的ID

HTML

<ul id="my-parent">
    <li>
        <a data-toggle="tab" href="#offer">
            <h3 data-toggle="collapse" data-target="#offerText" aria-expanded="false" aria-controls="collapseOne">Offer</h3>
        </a>
        <h5 id="offerText" class="collapse font-weight-normal my-4" data-parent="#my-parent">Sample offer</h5>
    </li>
    <li>
        <a data-toggle="tab" href="#find">
            <h3 data-toggle="collapse" data-target="#findText">Find</h3>
        </a>
        <h5 id="findText" class="collapse font-weight-normal my-4" data-parent="#my-parent">Sample find</h5>
    </li>
    <li>
        <a data-toggle="tab" href="#submit">
            <h3 data-toggle="collapse" data-target="#submitText">Submit</h3>
        </a>
        <h5 id="submitText" class="collapse font-weight-normal my-4" data-parent="#my-parent">To submit</h5>
    </li>
    <li>
        <a data-toggle="tab" href="#getPaid">
            <h3 data-toggle="collapse" data-target="#paidText">Get paid</h3>
        </a>
        <h5 id="paidText" class="collapse font-weight-normal my-4" data-parent="#my-parent">Sample paid</h5>
    </li>
</ul>

样品报价


样本发现


屈从


样品付费