--- title: Building an Accordion the Browser Can Search | daily.dev description: Accordion widgets that use `display: none` to hide content become invisible to browser find-in-page (Cmd/Ctrl+F), breaking a common user expectation. Two... canonical: https://daily.dev/posts/building-an-accordion-the-browser-can-search-ppmw7gzwd twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Building an Accordion the Browser Can Search | daily.dev og:description: Accordion widgets that use `display: none` to hide content become invisible to browser find-in-page (Cmd/Ctrl+F), breaking a common user expectation. Two... og:url: https://daily.dev/posts/building-an-accordion-the-browser-can-search-ppmw7gzwd og:image: https://api.daily.dev/og/posts/PPMW7GzWD.png og:image:alt: Building an Accordion the Browser Can Search og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Building an Accordion the Browser Can Search **[Agustin Barrientos](https://daily.dev/sources/wqyyve5tbj0nj7c7qpoa8)** · [@agustinbarrientos](https://daily.dev/agustinbarrientos) · 2 min read · 2 upvotes · 1 comments ## Summary Accordion widgets that use `display: none` to hide content become invisible to browser find-in-page (Cmd/Ctrl+F), breaking a common user expectation. Two platform features address this: `

` enables grouping with native find-in-page support and no JavaScript, while `hidden="until-found"` keeps content discoverable via find-in-page, fragment navigation, and scroll-to-text by leveraging `content-visibility: hidden` in the user-agent stylesheet. The catch with `hidden="until-found"` is that the browser can open a panel without a user click, so `aria-expanded` and open state flags go stale until a `beforematch` event handler reconciles them. Shadow DOM also breaks deep linking and the `beforematch` handler. The post includes a comparison table of hiding techniques, six interactive demos, and a Lit component implementation that handles browser-initiated panel reveals correctly. ## Content An FAQ collapses its answers with `display: none`, passes every click and keyboard test, and then someone presses **Cmd/Ctrl F** for a phrase they know is on the page and **the browser finds nothing**. What failed there is the assumption underneath the widget, that hiding is one on-or-off decision. An element can be hidden from layout, from sight, from the accessibility tree, from the browser's own search, or only until someone goes looking, and each of those makes a different promise to a different part of the browser. Two platform features answer that directly. `

` gives you a disclosure the browser already makes findable, deep-linkable, and single-open with **no JavaScript**, and `hidden="until-found"` keeps content reachable by find-in-page when you're building the disclosure yourself. The second one works because the user agent stylesheet puts the element in `content-visibility: hidden`, and find-in-page, fragment navigation, and scroll-to-text all special-case that state to reveal the content on a match. The cost is that **the browser can now open your panel without a click**, so `aria-expanded` and your own open flag stay wrong until a `beforematch` handler reconciles them, and both the deep link and that handler stop working if you seal the content inside a shadow root. The article walks the rest, a table of what each hiding technique still lets the browser do, six demos you check with your own Find instead of a readout that claims to detect it, and a Lit component that stays honest when the browser opens a panel out from under it. What outlasts the attributes is the question they hand you, since "how do I show and hide this panel" turns into **who should still be able to find this content**, and which layer should own revealing it. ➡️ [**Read the full article**](https://agustinbarrientos.com/writing/senior-eye/searchable-accordions?utm_source=linkedin&utm_medium=social&utm_campaign=searchable-accordions&utm_content=post) ## Community discussion Top comments from developers on daily.dev. **@agustinbarrientos** · 0 upvotes > Full article: [https://agustinbarrientos.com/writing/senior-eye/searchable-accordions/](https://agustinbarrientos.com/writing/senior-eye/searchable-accordions/?utm_source=linkedin&utm_medium=social&utm_campaign=searchable-accordions&utm_content=post) ## Similar posts on daily.dev - [Replacing JS with just HTML](https://daily.dev/posts/replacing-js-with-just-html-63nvjchya) · Hacker News · 12 upvotes · 1 comments - [Use cases for aria-expanded](https://daily.dev/posts/use-cases-for-aria-expanded-tgq9kcgth) · Piccalilli · 6 upvotes · 0 comments - [How to Make an Interactive Element Invisible but Accessible – Master.dev Blog](https://daily.dev/posts/how-to-make-an-interactive-element-invisible-but-accessible-master-dev-blog-pbvhswnt5) · Frontend Masters · 2 upvotes · 0 comments - [HTML Can Do That](https://daily.dev/posts/html-can-do-that-q5qggnxqq) · Lobsters · 6 upvotes · 0 comments --- Tags: [#css](https://daily.dev/tags/css), [#html](https://daily.dev/tags/html), [#accessibility](https://daily.dev/tags/accessibility), [#web-components](https://daily.dev/tags/web-components) [View this post on daily.dev](https://daily.dev/posts/building-an-accordion-the-browser-can-search-ppmw7gzwd) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"DiscussionForumPosting","mainEntityOfPage":"https://daily.dev/posts/building-an-accordion-the-browser-can-search-ppmw7gzwd","headline":"Building an Accordion the Browser Can Search","text":"Accordion widgets that use `display: none` to hide content become invisible to browser find-in-page (Cmd/Ctrl+F), breaking a common user expectation. Two platform features address this: `

` enables grouping with native find-in-page support and no JavaScript, while `hidden=\"until-found\"` keeps content discoverable via find-in-page, fragment navigation, and scroll-to-text by leveraging `content-visibility: hidden` in the user-agent stylesheet. The catch with `hidden=\"until-found\"` is that the browser can open a panel without a user click, so `aria-expanded` and open state flags go stale until a `beforematch` event handler reconciles them. Shadow DOM also breaks deep linking and the `beforematch` handler. The post includes a comparison table of hiding techniques, six interactive demos, and a Lit component implementation that handles browser-initiated panel reveals correctly.","url":"https://daily.dev/posts/building-an-accordion-the-browser-can-search-ppmw7gzwd","datePublished":"2026-08-10T15:15:00.213Z","dateModified":"2026-09-13T21:20:52.005Z","author":{"@type":"Person","name":"Agustin Barrientos","url":"https://daily.dev/agustinbarrientos","image":"https://media.daily.dev/image/upload/s--5ayxQnqn--/f_auto/v1788281802/avatars/avatar_wQYYVe5Tbj0NJ7C7qPoa8?_a=BAMAMicg0","description":"Google Developer Expert in Web Technologies | Sr UI/UX Designer & Frontend Engineer","worksFor":{"@type":"Organization","name":"Uncanny Owl","logo":"https://www.google.com/s2/favicons?domain=uncannyowl.com&sz=128"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"EndorseAction"},"userInteractionCount":27310}},"image":"https://media.daily.dev/image/upload/s--MZXrHpw3--/f_auto/v1786315299/posts/PPMW7GzWD?_a=BAMAMicg0","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":1}],"comment":[{"@type":"Comment","text":"Full article: https://agustinbarrientos.com/writing/senior-eye/searchable-accordions/","datePublished":"2026-08-10T15:17:19.490Z","url":"https://daily.dev/posts/PPMW7GzWD#c-URaRYEYTO","author":{"@type":"Person","name":"Agustin Barrientos","url":"https://daily.dev/agustinbarrientos","image":"https://media.daily.dev/image/upload/s--5ayxQnqn--/f_auto/v1788281802/avatars/avatar_wQYYVe5Tbj0NJ7C7qPoa8?_a=BAMAMicg0"}}],"isPartOf":{"@type":"WebPage","url":"https://daily.dev/sources/wqyyve5tbj0nj7c7qpoa8","name":"Agustin Barrientos"}} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Agustin Barrientos","item":"https://daily.dev/sources/wqyyve5tbj0nj7c7qpoa8"},{"@type":"ListItem","position":3,"name":"Building an Accordion the Browser Can Search"}]} ```