Tabs or an accordion — which to choose, and why Ctrl+F only finds one of them

Tabs and accordions solve the same problem: hide part of the content so the page doesn't turn into an endless scroll. People usually pick between them by taste.

Now a non-obvious difference. Press Ctrl+F on a page with tabs and search for a word from a closed tab — the browser says "not found". Do the same on an accordion built from <details> tags — the browser opens the right section itself and highlights the word. Chrome has done this since version 97, Firefox since 148, Safari since 26.2.

Let's go through the other differences and decide what to use.

What's what

Tabs — a row of short labels with one panel below. Pick a tab, see its content; the rest are hidden. One tab is always selected.

Accordion — a stack of headings. Tap a heading and a section expands below it, pushing everything else down. You can open one or several, or close them all.

Nielsen Norman Group has covered both patterns separately — and its article on tabs (updated in 2024) gives a direct rule for choosing between them. That's our starting point.

Comparison on criteria you can see right away

• Phones. The accordion wins. NN/g: on mobile it works better than tabs because space is tight, and a tab row quickly stops fitting the width and turns into a scrolling carousel.
• Desktop. Tabs win more often here. A closed accordion looks empty on a wide screen, while tabs handle long content and complex layouts.
• Label length. Tabs need short names, or the row overflows the screen. An accordion heading can be a whole question — which is why FAQ blocks are built exactly this way.
• Comparing two blocks. With tabs you can't see two panels at once: people flip back and forth and hold it all in their head. With an accordion you can open two sections — unless you've forbidden it with auto-close.
• Find in page. The browser's regular search can't see a hidden tab panel. A <details> accordion opens itself on search and when following an anchor link.
• Printing. A minus for the accordion: NN/g notes that closed sections don't print until you expand them one by one. An "Expand all" button fixes it.
• Keyboard. Different schemes. Per the W3C guide, focus enters the tab row and you move between tabs with arrow keys. An accordion section is a disclosure button: Enter or Space.
• How much code. An accordion can need no JavaScript at all. Tabs almost always need a script and a set of ARIA roles: tablist, tab, tabpanel.

Here's a complete accordion where only one section is open at a time:

<details name="faq">
  <summary>How long does delivery take?</summary>
  <p>Two to three days within the city.</p>
</details>
<details name="faq">
  <summary>Can I return an item?</summary>
  <p>Yes, within 14 days.</p>
</details>

The shared name attribute links the sections into a group: open one and the other closes. According to MDN, this works in Chrome from version 120, Firefox from 130 and Safari from 17.2.

Which one fits whom — a straight answer

• FAQ, delivery terms, specs on a phone → accordion. Long headings, people need one or two items, find-in-page works.
• The same data sliced different ways → tabs. "Day / week / month" above a chart, "Description / Reviews / Specs" on desktop. For NN/g this is the classic case: each tab has the same structure, only the data changes.
• So many tabs the row doesn't fit the width → not tabs. NN/g advises keeping them few: a row that spills into a carousel hides some tabs the same way a hamburger menu hides sections.
• People need almost all of the content → neither. Both patterns add interactions. If people will read everything or compare sections, NN/g explicitly recommends showing it all on one long page.

And one trap on phones. In an NN/g study, people expanded an accordion section, the page scrolled as if a new page had opened — and they pressed Back. The browser took them off the page entirely. Don't scroll the page when a section expands, or if you do, make Back close the section.

If the open tab should survive a refresh and a shared link, keep it in the address — how to do that is in the guide how to keep filters in the URL. And on narrow screens, this whole choice works together with your overall mobile-friendly layout.

Can tabs turn into an accordion on phones?

Yes — it follows directly from NN/g's rule: tabs are handier on wide screens, accordions on narrow ones. Just keep the content and section order identical, or people get lost when they rotate the screen.

Should the first accordion section be open by default?

Usually not. NN/g described a page where the expanded first section filled the whole screen and people didn't see there were other sections below. Closed headings work as a table of contents.

What if I hide tab panels but keep them findable by search?

That's what hidden="until-found" is for: the element is hidden, but find-in-page and anchor links reveal it. It's a newer capability than auto-opening <details>, so check support in the browsers you care about.