Find and open <details> with similar keywords
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.
3/2/2021 9:55:45 PMAdrian Kydland Skaftun
6 AnswersNew Answer
try this one: https://code.sololearn.com/Wqi2rQgAlFUr/?ref=app
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
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.
Thanks a lot!! This is great!