You add
data-bs-toggle="collapse" to a button in Joomla 5, point it at a target div, and... nothing. The button renders, looks correct, but clicking it does absolutely nothing. No error, no animation, nothing.
This trips up everyone who's used Bootstrap 5 on a normal site, because Joomla 5's Bootstrap works differently.
Symptoms
- data-bs-toggle="collapse" buttons don't respond to clicks
- Accordion components don't expand/collapse
- Smart Search advanced filter toggle does nothing
- No JavaScript errors in the console
- The same markup works perfectly on a regular Bootstrap 5 site
Root Cause
Joomla 5 loads Bootstrap JS as
ES modules, not as a global script. This means:
1.
window.bootstrap does not exist -- you can't call
new bootstrap.Collapse()
2.
Standard data-attribute auto-initialization is disabled -- Joomla stripped Bootstrap's document-level click delegation
3. Instead, Joomla uses
Joomla.getOptions("bootstrap.collapse") to get a list of specific element IDs to initialize
If your element isn't registered in that options JSON, Bootstrap's collapse JS never touches it. The button just sits there doing nothing.
This is why Smart Search's Advanced Search toggle is broken out of the box -- the com_finder component adds the markup but doesn't register the element in Joomla.getOptions().
The Fix
Add a click handler in your template's JavaScript that targets all collapse triggers:
Code:
document.querySelectorAll('[data-bs-toggle="collapse"]').forEach(function(btn) {
btn.addEventListener('click', function(e) {
e.preventDefault();
var targetSel = btn.getAttribute('data-bs-target') || btn.getAttribute('href');
var target = document.querySelector(targetSel);
if (!target) return;
if (target.classList.contains('show')) {
target.style.height = target.scrollHeight + 'px';
target.offsetHeight; // force reflow
target.classList.add('collapsing');
target.classList.remove('collapse', 'show');
target.style.height = '0';
target.addEventListener('transitionend', function handler() {
target.classList.remove('collapsing');
target.classList.add('collapse');
target.style.height = '';
target.removeEventListener('transitionend', handler);
});
} else {
target.classList.remove('collapse');
target.classList.add('collapsing');
target.style.height = '0';
target.offsetHeight; // force reflow
target.style.height = target.scrollHeight + 'px';
target.addEventListener('transitionend', function handler() {
target.classList.remove('collapsing');
target.classList.add('collapse', 'show');
target.style.height = '';
target.removeEventListener('transitionend', handler);
});
}
});
});
You also need these CSS classes (Joomla doesn't load Bootstrap's CSS on the frontend):
Code:
.collapse:not(.show) { display: none; }
.collapsing { height: 0; overflow: hidden; transition: height .35s ease; }
[hr]
This is one of 65+ gotchas documented in
The AI Joomla Blueprint --
theaidirector.win
