Error 'collapse is not a function' with bootstrap panel-collapse

Apanasevich

Hi there!

I've used the .collapse method of bootstrap panel-collapse and get an error in browser console.

Here is an example: https://jsfiddle.net/b4yacmm4/

Just try to expand a panel clicking by the icon > and you'll get such an error.

How to fix it?

Thanks in advance!

tangerine

It's not a DataTables error. Have you asked in a Bootstrap site?

Apanasevich

I think, it's not a Bootstrap error. The error is inside datatables.js:

Uncaught TypeError: $(...).closest(...).find(...).collapse is not a function
at HTMLAnchorElement.<anonymous> ((index):67)
at HTMLBodyElement.dispatch (datatables.min.js:15)
at HTMLBodyElement.r.handle (datatables.min.js:15)

Here is the same example, but without DataTables css and js imports: https://jsfiddle.net/ohyebjjw/ Everything works as expected.

allan

As "tangerine says its a Bootstrap error, not a DataTables one. It sounds like you have the Bootstrap Javascript included in your DataTables CDN build.

.collapse method of bootstrap panel-collapse

DataTables doesn't have a collapse method (see API reference). As you said yourself, its a Bootstrap method.

Looks like the issue is that jQuery is being included multiple times.

Allan

Apanasevich

Looks like the issue is that jQuery is being included multiple times.

This is not the source of the problem, I've included jQuery only once.

But your idea has made me to change the order of library imports. If the Bootstrap goes after the DataTables, everything works fine.

allan

You you had jQuery in the dataTables.js file (in the same way you had the Bootstrap file) then yes, it would have been the issue.

Allan