How do I keep one accordion tab open and not allow it to shut unless another is opened?-CodePudding

I am wondering how to keep an accordion tab open and not allow it to shut unless another tab is opened. If another tab is opened, I would then like that accordion to shut.

This is my current accordion code:

$('[data-bs-toggle="collapse"]').on('click', function(e) {
  if ($(this).parents('.accordion').find('.collapse.show')) {
    var idx = $(this).index('[data-bs-toggle="collapse"]');
    if (idx == $('.collapse.show').index('.collapse')) {
      // prevent collapse
      e.stopPropagation();
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div  id="accordionFlush">
  <div >
    <h2  id="headingOne">
      <div  data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        <button  type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseTwo">
                                SEO SHORT INFO SENTENCE 1
                              </button>
      </div>
    </h2>
    <div id="collapseOne"  aria-labelledby="headingOne" data-bs-parent="#accordionFlush">
      <div >
        <strong>Lorem ipsum dolor sit amet consectetur adipisicing elit.</strong> Lorem ipsum dolor sit amet consectetur adipisicing elit.
        <div>
          <a href="#" >Enquire Now</a>
          <!-- needs spacing -->
        </div>
      </div>
    </div>
  </div>
  <div >
    <h2  id="headingTwo">
      <button  type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                            SEO SHORT INFO SENTENCE 2
                        </button>
    </h2>
    <div id="collapseTwo"  aria-labelledby="headingTwo" data-bs-parent="#accordionFlush">
      <div >
        <strong>Lorem ipsum dolor sit amet consectetur adipisicing elit.</strong>Lorem ipsum dolor sit amet consectetur adipisicing elit.
        <div>
          <a href="#" >Enquire Now</a>
        </div>
      </div>
    </div>
  </div>
  <div >
    <h2  id="headingThree">
      <button  type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                            SEO SHORT INFO SENTENCE 3
                        </button>
    </h2>
    <div id="collapseThree"  aria-labelledby="headingThree" data-bs-parent="#accordionFlush">
      <div >
        <strong>Lorem ipsum dolor sit amet consectetur adipisicing elit.</strong> Lorem ipsum dolor sit amet consectetur adipisicing elit.
        <div>
          <a href="#" >Enquire Now</a>
        </div>
      </div>
    </div>
  </div>
</div>

Any help will be massively appreciated. Kind regards.

CodePudding user response：

When a panel is opened, keep a record of that panel, then when attempting to close, if it's the same, don't close.

Add an initialisation to set to the default-open panel.

Make use of the accordion events, eg:

$(".collapse").on("show.bs.collapse", function(e) {

Updated snippet:

let target = $(".collapse:not(.collapsed)").get(0);

$(".collapse").on("show.bs.collapse", function(e) {
  target = e.target;
});

$(".collapse").on("hide.bs.collapse", function(ee) {
  if (ee.target == target)
    return false;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div  id="accordionFlush">
  <div >
    <h2  id="headingOne">
      <div  data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        <button  type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseTwo">
        SEO SHORT INFO SENTENCE 1
        </button>
      </div>
    </h2>
    <div id="collapseOne"  aria-labelledby="headingOne" data-bs-parent="#accordionFlush">
      <div >
        <strong>Lorem ipsum dolor sit amet consectetur adipisicing elit.</strong> Lorem ipsum dolor sit amet consectetur adipisicing elit.
        <div>
          <a href="#" >Enquire Now</a>
          <!-- needs spacing -->
        </div>
      </div>
    </div>
  </div>
  <div >
    <h2  id="headingTwo">
      <button  type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
            SEO SHORT INFO SENTENCE 2
        </button>
    </h2>
    <div id="collapseTwo"  aria-labelledby="headingTwo" data-bs-parent="#accordionFlush">
      <div >
        <strong>Lorem ipsum dolor sit amet consectetur adipisicing elit.</strong>Lorem ipsum dolor sit amet consectetur adipisicing elit.
        <div>
          <a href="#" >Enquire Now</a>
        </div>
      </div>
    </div>
  </div>
  <div >
    <h2  id="headingThree">
      <button  type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                            SEO SHORT INFO SENTENCE 3
                        </button>
    </h2>
    <div id="collapseThree"  aria-labelledby="headingThree" data-bs-parent="#accordionFlush">
      <div >
        <strong>Lorem ipsum dolor sit amet consectetur adipisicing elit.</strong> Lorem ipsum dolor sit amet consectetur adipisicing elit.
        <div>
          <a href="#" >Enquire Now</a>
        </div>
      </div>
    </div>
  </div>
</div>