Parts 1 and 2 of this series covered the API-related prerender failure on the Benchmarks page. This part covers a different problem, one that has nothing to do with prerendering or API calls. It's a fundamental property of how most modern UI accordion components work, and it affects any page where you put important content inside a collapsible.

What we found: 9 questions, zero answers

When we fetched the About page HTML directly, the way a bot or AI tool would, we found 9 FAQ question headings clearly present in the document. The answers were completely absent. Not hidden with CSS. Not set to display: none. Not collapsed with height: 0. The text simply was not there. Any crawler reading that HTML would conclude the page had no FAQ content and nothing substantive to index.

Why Radix UI removes closed content from the DOM

Stackra's UI is built on shadcn/ui, which uses Radix UI primitives for interactive components. Radix UI's Accordion implementation, like most headless UI libraries, works by completely unmounting closed AccordionContent from the React tree when the item is collapsed. This is a deliberate performance optimization: why keep DOM nodes for content the user can't see? For users it's invisible. For bots, it means the content never existed.

  • Radix UI Primitives ↗

    The open-source component library whose Accordion unmounts closed content from the DOM by default.

  • shadcn/ui ↗

    The UI component collection used throughout Stackra, built on Radix UI primitives with Tailwind CSS.

Which components have this problem

Any component that unmounts closed content from the DOM will hide that content from crawlers. In Radix UI and shadcn/ui this includes:

  • Accordion: the most common offender for FAQ sections
  • Collapsible: same unmounting behavior
  • Dialog and Sheet: content is unmounted when the overlay is closed
  • Tabs: non-active tab panels may be unmounted depending on implementation
  • Select and DropdownMenu: option text is only in the DOM when open

The fix: native HTML details and summary

The browser has a built-in collapsible element that works fundamentally differently: the <details> element with a <summary> trigger. The critical difference from Radix Accordion is that <details> always keeps its content in the DOM. The browser shows or hides it visually based on the open attribute, but the text is always present in the HTML. Crawlers read it. AI tools read it. Google explicitly confirms it indexes <details> content.

How to style it to match your design

Replacing an accordion with <details>/<summary> doesn't mean losing your design. With Tailwind CSS you can match the existing accordion look exactly:

  • Wrap each FAQ item in <details className="group">. The group class enables state-based child styling.
  • Put the question in <summary> and use [&::-webkit-details-marker]:hidden to remove the default browser triangle.
  • Add a ChevronDown icon with className="group-open:rotate-180 transition-transform" for the animated chevron
  • Put the answer text directly inside <details> after the <summary> element
  • Style with divide-y on the container for the same border separators as an accordion

The result

After deploying the change, fetching the About page HTML returns all 9 FAQ questions and all 9 answers fully present in the document. Zero JavaScript required for the open/close behavior. No hydration timing issues. No framework-specific tricks. The content is just there, in the HTML, exactly where crawlers expect it.

  • Stackra About & FAQs →

    The page where the Radix accordion was replaced with native details elements — all FAQ answers now fully visible to crawlers.

The full audit checklist

Run these steps on any React or component-library-based site to find and fix bot visibility gaps:

  • Step 1: curl your key pages. Run curl -s https://yoursite.com/page | grep 'text you expect'. If it's missing, bots can't see it.
  • Step 2: Identify prerendering gaps. Check that your build process actually renders data-driven pages with real content, not loading states.
  • Step 3: Proxy any API calls your prerender needs. Add proxy routes in your build-time static server for each endpoint your prerendered pages call.
  • Step 4: Audit every collapsible section. Check whether closed content is in the DOM or fully unmounted. Open DevTools and inspect. If the DOM node is gone, so is the content.
  • Step 5: Replace unmounting accordions with native <details>/<summary> for any content you want indexed, including FAQs, product specs, pricing breakdowns, and feature explanations.
  • Step 6: Re-deploy and re-fetch. Run curl on the same pages again to confirm the content is now present in the raw HTML.

Why this matters more as AI search grows

Search has always required crawlable content, but the stakes are higher now. AI fetchers like GPTBot, ClaudeBot, and PerplexityBot -- the crawlers that power the AI tools your potential customers use to research and compare products -- pull content directly from page HTML. They don't execute JavaScript. They don't expand accordions. They read what's there. Google eventually renders JavaScript too, but even for Google the accordion content problem applies: if the DOM node is unmounted, there's nothing to render. If your content isn't in the HTML, you don't exist to these tools. The fixes in this series are not complex. But skipping them means entire pages of your site are invisible to the tools shaping how people discover products and services.