我試圖用bootstrap實現一個accordion，當一個按鈕被點擊時，就會出現折疊顯示。重要的是要明白，當一個塌陷打開時，另一個必須關閉。

它似乎是這樣工作的，但是如果我開始在它們之間快速切換，我會發現一個錯誤，我同時打開了兩個折疊。

Bootstrap文檔說要達到這個效果，需要指定相同的data-bs-target，但是從我的代碼中可以看到，這方面是考慮到了的。下面我將附上所有需要的代碼，以及一個演示這個錯誤的視頻。

錄像

我讀了文檔，但它沒有給我任何東西，據我所見，一切都做得很正確。

.container {
  font-family: 'Roboto', sans-serif;
}

.steps {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  position: relative;
}

.step-button {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  background-color: fff;
  transition: .4s;
}

.step-button[aria-expanded="true"] {
  width: 60px;
  height: 60px;
  background-color: #332D2D;
  color: #fff;
}

.step-item {
  z-index: 10;
  text-align: center;
}

.card {
  font-family: 'Roboto', sans-serif;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

<link rel="stylesheet"  integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div class="container">
  <div class="accordion" id="accordion">
    <div class="steps">
      <div class="step-item mx-auto">
        {% for step in steps %} {% if step.id == 1%}
        <button class="step-button text-center" type="button" data-bs-toggle="collapse" data-bs-target="#Step{{ step.id }}" aria-expanded="true" aria-controls="collapse{{ step.id }}">
                {{ step.id }}
                </button> {% else %}
        <button class="step-button text-center" type="button" data-bs-toggle="collapse" data-bs-target="#Step{{ step.id }}" aria-expanded="false" aria-controls="collapse{{ step.id }}">
                                {{ step.number_step }}
                </button> {% endif %} {% endfor %}
      </div>
    </div>
    <div class="card ">
      {% for step in steps %} {% if step.id == 1 %}
      <div id="Step{{ step.id }}" class="collapse show" data-bs-parent="#accordion">
        {% else %}
        <div id="Step{{ step.id }}" class="collapse" data-bs-parent="#accordion">
          {% endif %}
          <div class="card-body">
            <img class="rounded mx-auto d-block w-75 h-75 card-img-top" src="{{ step.lesson_image.url }}" alt="none">
            <h5 class="text-center card-title fw-bold fs-3">{{ step.title }}</h5>
            <p>{{ step.description }}</p>
            <h5 class="text-center card-title fw-bold fs-3">Что нужно сделать?</h5>
            <p>{{ step.goal }}</p>
            <h5 class="text-center card-title fw-bold fs-3">Как это сделать?</h5>
            <p>{{ step.decision }}</p>
            <h5 class="text-center card-title fw-bold fs-3">Полезный материал</h5>
            <p>{{ step.support_material }}</p>
          </div>
        </div>

        {% endfor %}
      </div>
    </div>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>