Find and open <details> with similar keywords

Question

I have a page with a loooot of nested <details> and <summary>. I want the user to be able to search through the page and based on the searchterm open every detail and their parent to show results that matches. Maybe focus in on the first one or the one with best match. Is it even possible to close down every other details tag that does not match?

To make every detail and summary tag more searchable, i would want to add hashtags that would ease the search. Is this best done with a child <p hidden> for every details tag or something com pletely different?

JS is not my strong suit. I havent had the time to learn it yet. This project is for a school related project. Any help would be appreciated.

Im not sure what else to write, but ask me anything if this is not clear enough.

Answer 1

try this one:

https://code.sololearn.com/Wqi2rQgAlFUr/?ref=app

Answer 2

When you wrote "search through the page", did you mean using the regular 'Search in page' browser feature or are you into doing this by yourself?

Your chances for answers will improve if you have a code to accompany this question. You can save your code in SoloLearn (if you haven't already), and share the saved code link in the thread Description above by following these steps 👇

https://www.sololearn.com/post/75089/?ref=app

Answer 3

I tried (via phone) to use the inbuilt search method, ut that didnt find keywords within closed details. Therefore i think i have to create something myself.

I did some googling, and found something but i havent made it work yet. Probably a simple solution to it:
https://code.sololearn.com/W8vB99K3DFhh/?ref=app
Resource:
https://blog.codecentric.de/en/2013/11/javascript-search-text-html-page/

I made this attempt after sending the OP. The original code i have on my PC made my phone crash (because it was too long), therefore this example is very short.

Answer 4

It's a bit more complex than I thought as I see now that you are using nested summary/details elements.

I'll see what I can do. Hope you didn't expect much though, I'm still a learner of this Javascript language.

I hope someone more knowledgeable can come up with something sooner too.

Answer 5

May i ask for aditional question here?

Could you add a highlight, background color change for every result.

And a button on top that will make every detail close. Or/and even better - when performing a new search close every detail and open matches only.

Maybe change bckgrnd for results and remove for new searches as well.

Answer 6

Thanks a lot!! This is great!