PR: Uncollapse dropdowns that contain highlighted words (e.g. from search)

[CAM-Gerlach]

Pull Request

Pull Request Checklist

• [x] Read and followed this repo's Contributing Guidelines
• [x] Based your PR on the latest version of the correct branch (master or 4.x)
• [x] Checked your writing carefully for correct English spelling, grammar, etc
• [x] Described your changes and the motivation for them below
• [x] Noted what issue(s) this pull request resolves, creating one if needed

Description of Changes

Automatically uncollapses any FAQ questions (or other dropdowns across the pages that use them) that contain the highlighted search term, so it may be more easily found on the page. Previously, when using the site's search function to find a word present on the FAQ page and clicking on the FAQ page in the results, the highlighted term was not visible if it was inside the collapsed FAQ answers. With this PR, any FAQ questions or answers that contain a highlighted term automatically uncollapse themselves when visiting the page.

Issue(s) Resolved

Fixes #250

[juanis2112]

Thanks @CAM-Gerlach for working on this. I haven't been able to make this work in Mac. Maybe I'm doing something wrong but when I search in the FAQ page no dropdowns uncollapse plus if they are uncollapsed things inside the answers are not even highlighted. Can you tell me if I'm interpreting this wrong?

[CAM-Gerlach]

@juanis2112 Thanks for the test and sorry for the confusion. What this PR does (and what I incorrectly assumed you were asking for, sorry) is that when you search using the site's search functionality (rather than your browser's) and it highlights search terms on a page, any FAQs (or other dropdowns, like the video scripts) containing those terms will automatically uncollapse. What you describe above not is readily* possible because this is built-in browser functionality that the website has no control over or even visibility into (i.e. no way to know what is highlighted or when to be able to do something about it). This is an unfortunately common limitation even on large websites, that is somewhat mitigated by the fact that most average users tend to use the site's own search functionality and many don't even know about their browsers.

* Technically, a few large sites do implement this themslves, but it requires intercepting the find keystroke and then re-implementing your browser's page search functionality from scratch in Javascript. As you might imagine, this is a highly non-trivial task (hundreds to thousands of lines of custom JS) and even then it is pretty unreliable across different browsers/OSes because it is messing with native browser/OS functionality.

[juanis2112]

I think I was wrong. In the issue it is clear that it is referring to the site's search not the browser. I think it is working fine.

[CAM-Gerlach]

Okay, thanks for clarifying @juanis2112 Correct me if I'm wrong, but I wasn't able to reproduce any problems with search finding words inside dropdowns (as shown in your screenshot and implied by the original issue title). Rather (as I inferred from your description), the issue was that after clicking on the FAQ page in which results had been found, the highlighted search term would not be visible if it was inside collapsed answers, which with this PR are now automatically uncollapsed if they contain one.

I apologize that the initial PR description wasn't entirely clear; I've updated it to be more specific. Could you review and confirm it works now on your browser? Specifically, could you click the FAQ page in the results and make sure answers containing the search term are uncollapsed?

[CAM-Gerlach]

@juanis2112 seemed to indicate this fixed the issue, and my testing confirms it on both desktop and mobile on multiple platforms, so going ahead and merging.