-
-
Notifications
You must be signed in to change notification settings - Fork 79.1k
Open
Labels
Description
Prerequisites
- I have searched for duplicate or closed feature requests
- I have read the contributing guidelines
Proposal
Add support for searching text within an accordion, using the hidden=until-found property. It will have support in both Firefox and Chrome starting May 27th. This is a big deal for accessibility, as it can prevent certain users from finding the content they need.
Edit: and a webkit PR has been merged for this: WebKit/WebKit#47284
Motivation and context
- Currently, I have to select between an unstyled
detailselement with the ability to search (control+f) collapsed content, and a styled accordion element without the ability to search it's content. Bootstrap should support this out of the box.
I use the following workaround to support a searchable bootstrap accordion:
/* Modified from https://codepen.io/wdzajicek/pen/VYZawjX */
[hidden='until-found'].collapse:not(.show) {
/* Prevent Bootstrap .collapse class from adding display: none so that beforematch event still fires */
display: block !important;
}
[hidden='until-found'] {
display: none !important;
}const enableAccordionFind = () => {
// Check browser support for the "beforematch" event
// (only supported in Chrome and Firefox as of May 2025)
if (!('onbeforematch' in document.body)) {
return;
}
const accordions = [...document.querySelectorAll('.accordion-collapse.collapse')];
accordions.forEach((item) => {
item.hidden = 'until-found';
const collapse = new bootstrap.Collapse(item, { toggle: false });
// Manually toggle if a match is found
item.onbeforematch = (_e) => collapse.toggle();
item.addEventListener('show.bs.collapse', (_e) => {
item.removeAttribute('hidden');
});
item.addEventListener('hidden.bs.collapse', (_e) => {
item.hidden = 'until-found';
});
});
};
document.addEventListener('DOMContentLoaded', enableAccordionFind);I'm hoping that this functionality can be added natively to bootstrap.
nwalters512, jonatanschroeder, julien-deramond and crftwrk