Bootstrap Accordion/Collapse Uncaught TypeError: Illegal invocation

user_5654210 0
Viewed 588

I am using Bootstrap 5 accordion/collapse feature, my code seems to be in line with BS5 docs, but have an issue similar to this one on StackOverflow from a few months ago:

Bootstrap Accordion Throws TypeError: Illegal invocation

Here is the browser error message:

Uncaught TypeError: Illegal invocation
at Object.find (selector-engine.js:18)
at X._getParent (collapse.js:301)
at new X (collapse.js:93)
at Function.collapseInterface (collapse.js:347)
at collapse.js:397
at Array.forEach (<anonymous>)
at HTMLButtonElement.<anonymous> (collapse.js:382)
at HTMLDocument.s (event-handler.js:119)

Demo here: https://codepen.io/highercoding/pen/BadYQrL?editors=1010

bootstrap-5 twitter-bootstrap
1 Answers

The culprit is data-bs-parent on the #collapse-manufacturers. It should be the id of the accordion component #product-filter-accordion.

<!DOCTYPE html>
<html>
  <head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
  </head>
  <body>
      
    <div class="accordion accordion-flush" id="product-filter-accordion">
      <div id="product-filter-sidebar-manufacturers" class="product-filter-sidebar widget-area accordion-item" role="complementary">
        <h3 id="heading-manufacturers" class="accordion-header">
          <button data-bs-toggle="collapse" data-bs-target="#collapse-manufacturers" aria-controls="collapse-manufacturers" aria-expanded="false" class="accordion-button collapsed" type="button">Click here on the accordion header </button>
        </h3>
        <div id="collapse-manufacturers" aria-labelledby="heading-manufacturers" data-bs-parent="#product-filter-accordion" class="accordion-collapse collapse">
          <div class="accordion-body">You no more have to click twice to see the accordion body content :)</div>
        </div>
      </div>
    </div>
      
  </body>
</html>

user_162028000
Related