0

Pretty self explanatory. I have a bootstrap accordion that I want to collapse, when the user clicks somewhere other than the accordion. Bootstrap dropdowns have this functionality, but not accordions? Couldn't find anything in the Docs.

<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        Accordion Item #1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingTwo">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        Accordion Item #2
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
</div>
Joshua Clancy
  • 121
  • 1
  • 9
  • Have you tried anything so far? – Carol Skelly Apr 18 '22 at 21:23
  • Yeah I tried data-backdrop="static" but that is supposedly just for Modals. I also found a jquery solution here https://stackoverflow.com/questions/18421214/how-to-make-a-closing-accordion-when-you-click-outside-of-it. Though i can not use jquery and i am trying to avoid javascript if possible. – Joshua Clancy Apr 18 '22 at 22:40
  • 1
    You said _and i am trying to avoid javascript if possible_, if it is not available in Bootstrap document it means you have to use custom JS for this. – vee Apr 19 '22 at 02:48
  • Damn ok, fair enough. JS is not my strong suit but I'll start looking there. – Joshua Clancy Apr 19 '22 at 17:31
  • OK solved. But wholly heck that was more difficult then imagined. Definately requires Javascript. Getting the accordion to close when clicked is actually pretty easy but it creates a ton of cascading problems. Those problems require timeout functions to solve. Anyone else with this problem should check this out. https://stackoverflow.com/questions/152975/how-do-i-detect-a-click-outside-an-element Scroll down to the comment by 7 revs where it says in big "You don't actually want to bind click handlers". He explains it perfectly. Beware Timeout nonsense is messy!!! – Joshua Clancy May 03 '22 at 20:21

0 Answers0