Close old Collapse when I open new Collapse in Bootstrap-CodePudding

I have a Bootstrap Collapse. The old collapse doesn't close when I open new collapse. Is there anything possible to close old collapse when I open new one?

<div class="my-2">
  <a class="btn btn-success text-start form-control fs-3" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
   <i class="fas fa-minus"></i> 1. PRODAM10 DAMLA NEDİR?
  </a>
<div class="collapse" id="collapseExample">
  <div class="card card-body border-4 fs-4">
    lorem ipsum...
  </div>
</div>
</div>

<div class="my-2">
  <a class="btn btn-success text-start form-control fs-3" data-bs-toggle="collapse" href="#collapseExample2" role="button" aria-expanded="false" aria-controls="collapseExample2">
   <i class="fas fa-minus"></i> 2. Nasıl Etki Eder?
  </a>
<div class="collapse" id="collapseExample2">
  <div class="card card-body border-4 fs-4">
    lorem ipsum...
  </div>
</div>
</div>

CodePudding user response：

Bootstrap v4:

You need to use an accordion as a parent and add data-parent to the collapseables

Bootstrap documentation v4

<div id="accordion">
    <div className="my-2">
        <a className="btn btn-success text-start form-control fs-3" data-bs-toggle="collapse" href="#collapseExample"
           role="button" aria-expanded="false" aria-controls="collapseExample">
            <i className="fas fa-minus"></i> 1. PRODAM10 DAMLA NEDİR?
        </a>
        <div className="collapse" id="collapseExample" data-parent="#accordion">
            <div className="card card-body border-4 fs-4">
                lorem ipsum...
            </div>
        </div>
    </div>
    
    <div className="my-2">
        <a className="btn btn-success text-start form-control fs-3" data-bs-toggle="collapse" href="#collapseExample2"
           role="button" aria-expanded="false" aria-controls="collapseExample2">
            <i className="fas fa-minus"></i> 2. Nasıl Etki Eder?
        </a>
        <div className="collapse" id="collapseExample2" data-parent="#accordion">
            <div className="card card-body border-4 fs-4">
                lorem ipsum...
            </div>
        </div>
    </div>
</div>

Bootstrap V5: collapsible and accordion are different things Bootstrap V5 documentation

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="accordion accordion-flush" id="accordionFlushExample">
    <div class="accordion-item">
        <h2 class="accordion-header" id="flush-headingOne">
            <a className="btn btn-success text-start form-control fs-3 accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" href="#flush-collapseOne"
               role="button" aria-expanded="false" aria-controls="flush-collapseOne">
                <i className="fas fa-minus"></i> 1. PRODAM10 DAMLA NEDİR?
            </a>
        </h2>
        <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
            <div class="accordion-body">lorem ipsum...</div>
        </div>
    </div>
    <div class="accordion-item">
        <h2 class="accordion-header" id="flush-headingTwo">
            <a className="btn btn-success text-start form-control fs-3 accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" href="#flush-collapseTwo"
               role="button" aria-expanded="false" aria-controls="flush-collapseOne">
                <i className="fas fa-minus"></i> 2. Nasıl Etki Eder?
            </a>
        </h2>
        <div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
            <div class="accordion-body">lorem ipsum...</div>
        </div>
    </div>
</div>