Our team has implemented an expandable box feature on our wiki (in Confluence) to condense information, using the standard display:none/block method. However, I am looking for a way to make this work seamlessly with the browser's find functionality. So far, I have discovered that switching to hiding content using max-height allows the browser to correctly search the text. But ideally, I want the collapsible section to automatically expand when a matching query is found within it, and then collapse again once the search moves away from it. Is there a solution to achieve this?
I have attempted to use the focus and selectionchange events without success. While tracking scrolling or keystrokes could be options, they do not specifically indicate whether the collapsible section contains the searched term.
In short, I am searching for a way to detect browser find within an expandable box.
Update: Attached below is a snippet of the code structure:
var expand = document.querySelector('.expand');
expand.querySelector('.head').addEventListener('click', function(e) {
//toggle a class .show on .expand
})
Additionally, here is the relevant CSS styling:
.expand .body {
opacity: 0;
max-height: 0;
padding: 0 20px 0 40px;
transition: all .4s;
}
.expand.show .body {
max-height: 3000px;
opacity: 1;
padding: 10px 20px 20px 40px;
}