Content inside a `details` element is excluded from in-page search

It makes total sense, of course: if content is on the page but isn’t actually showing on the page, then there’s no need to show when searching content. That’s what I assumed it would do, but know for sure after testing in the major browsers. Search me! The quick brown fox jumped lazily over the […]

The post Content inside a `details` element is excluded from in-page search appeared first on Geoff Graham.

It makes total sense, of course: if content is on the page but isn’t actually showing on the page, then there’s no need to show when searching content. That’s what I assumed it would do, but know for sure after testing in the major browsers.

Search me!

The quick brown fox jumped lazily over the big brown dog. Or something like that. ????

To be clear, once the details panel is open, search will indeed pick up the text inside. I can see justification for allowing the text to be searched in the closed state as well. It’s one of those things that you sorta have to draw a line in the sand for, and it seems all browsers have drawn the line at excluding hidden text.

In that sense, in-page search treats text inside a details element the same as text that’s hidden with display: none.

The post Content inside a `details` element is excluded from in-page search appeared first on Geoff Graham.


Print Share Comment Cite Upload Translate
APA
Geoff Graham | Sciencx (2024-03-29T10:30:30+00:00) » Content inside a `details` element is excluded from in-page search. Retrieved from https://www.scien.cx/2021/07/16/content-inside-a-details-element-is-excluded-from-in-page-search-2/.
MLA
" » Content inside a `details` element is excluded from in-page search." Geoff Graham | Sciencx - Friday July 16, 2021, https://www.scien.cx/2021/07/16/content-inside-a-details-element-is-excluded-from-in-page-search-2/
HARVARD
Geoff Graham | Sciencx Friday July 16, 2021 » Content inside a `details` element is excluded from in-page search., viewed 2024-03-29T10:30:30+00:00,<https://www.scien.cx/2021/07/16/content-inside-a-details-element-is-excluded-from-in-page-search-2/>
VANCOUVER
Geoff Graham | Sciencx - » Content inside a `details` element is excluded from in-page search. [Internet]. [Accessed 2024-03-29T10:30:30+00:00]. Available from: https://www.scien.cx/2021/07/16/content-inside-a-details-element-is-excluded-from-in-page-search-2/
CHICAGO
" » Content inside a `details` element is excluded from in-page search." Geoff Graham | Sciencx - Accessed 2024-03-29T10:30:30+00:00. https://www.scien.cx/2021/07/16/content-inside-a-details-element-is-excluded-from-in-page-search-2/
IEEE
" » Content inside a `details` element is excluded from in-page search." Geoff Graham | Sciencx [Online]. Available: https://www.scien.cx/2021/07/16/content-inside-a-details-element-is-excluded-from-in-page-search-2/. [Accessed: 2024-03-29T10:30:30+00:00]
rf:citation
» Content inside a `details` element is excluded from in-page search | Geoff Graham | Sciencx | https://www.scien.cx/2021/07/16/content-inside-a-details-element-is-excluded-from-in-page-search-2/ | 2024-03-29T10:30:30+00:00
https://github.com/addpipe/simple-recorderjs-demo