Hello, I have an issue with accordion behaviour.

Context:
Joomla 5
JA Purity IV template
T4 page builder

I have created a page using the T4 page builder having two independent accordions. Tested in the preview, works fine, the accordions are independent of each other.

The page behaves differently when published. In the published page the accordions are no longer independent.

For some reason, the data-parent parameter is ignored by the JS. AFAIK the functionality is handled by the collapse.js by Bootstrap, based on the header link it is version 5.3.3 in my case.

I just dragged two accordions to the page and published it. I have not found any useful documentation. There must be a difference I do not see. Do I need to include some other libraries to make it work on the published site? Does the T4 page builder preview include a different library? I have found examples on the internet where I can see parts of code that do not exist in my collapse.js.

e.g. https://getbootstrap.com/docs/5.0/components/accordion/
has this line in the getParent method
const selector = ${SELECTOR_DATA_TOGGLE}[data-bs-parent="${parent}"]
and more logic in the API integration handling the parent which I cannot find in my collapse.js.

I can write my own JS handling the accordions, but that's kind of inventing the wheel.

Any ideas about that?
Thanks.

It took me a while, but there are conflicting libraries. Now I need to find out what is causing that.

So, it is the t4pagebuilder.js. It somehow overrides the collapse.js. When I removed the t4pagebuilder.js from the published site the accordions worked as expected.

Write a Reply...
You need to Login to view replies.