Getting error in console for collapse JavaScript plugin

[eqx-devops]

Getting error in console for collapse JavaScript plugin
collapse not working as expected it was working 4 days before
Uncaught TypeError: Cannot read property 'querySelectorAll' of null
version used : https://www.npmjs.com/package/bootstrap/v/4.0.0-alpha.6

URL :https://www.equinox.com/clubs/canada
Click on accordion Bay Street

[Johann-S]

Bug reports must include a live demo of the problem. Per our contributing guidelines, please create a reduced test case via CodePen or JS Bin and report back with your link, Bootstrap version, and specific browser and OS details.

[FrankK31]

I am now getting the same error on a basic collapse since going from 4.1.1 to 4.1.2. I'll put up a codepen when I get a chance.

[FrankK31]

I found the issue. The change from 4.1.1 to 4.1.2 no longer allows using data-parent attribute when using collapse. I used the data-parent to remove a currently open element with the new element. Basically I was using accordion logic with the buttons. So removing data-parent takes the 'querySelectorAll' error away but I'll have multiple elements open at once. The below codepen shows the error.

https://codepen.io/anon/pen/rrLBxp?editors=1111

[Johann-S]

Our collapse works well with data-parent see: https://getbootstrap.com/docs/4.1/components/collapse/#accordion-example

In your example, you mis placed your data-parent and your data-parent (#cardButtonGroup) do not exist in the DOM

[Ruffio]

If the cause has been found and it is not a bug then this 'issue' should be closed

[pouyana]

From v4.1.1 to v4.1.2, bootstrap somehow has different behavior toward the data-parent. In v4.1.1 when the id given does not exist in DOM, the collapsible still works. In v4.1.2, It gives the following error:

Uncaught TypeError: Cannot read property 'querySelectorAll' of null
    at Collapse._getParent (bootstrap.js:1310)
    at new Collapse (bootstrap.js:1125)
    at HTMLDivElement.<anonymous> (bootstrap.js:1345)
    at Function.each (jquery.js:354)
    at jQuery.fn.init.each (jquery.js:189)
    at jQuery.fn.init._jQueryInterface [as collapse] (bootstrap.js:1334)
    at HTMLDivElement.<anonymous> (bootstrap.js:1394)
    at Function.each (jquery.js:354)
    at jQuery.fn.init.each (jquery.js:189)
    at HTMLButtonElement.<anonymous> (bootstrap.js:1389)

I think #26630 is responsible, which is reasonable.

Solutions:

1. omit it, When there is no need.
2. Set an existing id as parent.

[Johann-S]

You're right @pouyana, setting an existing id as parent is the solution 😄

[eqx-devops]

Thanks guys I have already fixed this :)

[grayayer]

If you are doing custom inclusion of the bootstrap javascript plugins separately, make sure that that you include util.js before collapse.js.

That's what solved it for me.

[apoorva-ui]

Hi, I am getting the same issue. I am able to remove it from the console, by deleting data-parent from the HTML code. But then only expandable functionality working and collapsing. I really need help to fix the issue, as it has to push tomorrow for my work. Please let me know anyone. I am using panel group and inside that tag containing href to target iv and data-toggle collapse.

[apoorva-ui]

The problem is the code owrking fine at my side with error even and also on some of my team members. But this accordian not working on one of client and also one or two systems.