Components: Tab & Accordion

Guides tab and accordion implementation for organizing content without excessive vertical space. Two layout patterns:

vertical accordion

(FAQ-style, stacked) and

horizontal tabs

(how-to style, side-by-side). Both improve UX by reducing scroll; SEO impact depends on implementation and content placement.

When invoking

On

first use

, if helpful, open with 1–2 sentences on what this skill covers and why it matters, then provide the main output. On

subsequent use

or when the user asks to skip, go directly to the main output.

Layout Patterns

Pattern

Layout

Best for

Example

Vertical accordion

Stacked; expand/collapse one at a time

FAQ, Q&A, long lists, objection handling

"How do I return?" → answer below

Horizontal tabs

Side-by-side labels; one panel visible

How-to steps, product specs, pricing tiers, comparisons

"Step 1 | Step 2 | Step 3"

Mobile

Vertical accordion works well on small screens (natural scroll). Horizontal tabs can feel cramped—consider accordion, dropdown, or full-width tab bar that scrolls.

SEO: Is It Friendly?

Google's position

Google indexes and ranks content inside tabs and accordions fully; hidden content receives full weight (confirmed since 2016 mobile-first indexing). Gary Illyes: "we index the content, its weight is fully considered for ranking."

Practical nuance

Some tests show always-visible content outperforms hidden content in rankings. Reserve tabs/accordions for

secondary

content; place primary, keyword-critical content in visible areas.

Content type

Placement

Primary / ranking-focused

Visible above fold; not hidden

Secondary / supporting

Tabs, accordions acceptable

FAQ answers

Accordion OK; first item expanded by default; see

faq-page-generator

Indexing Requirements

Content must be in the DOM on page load.

Google does not simulate user clicks; it cannot "click" tabs to discover content.

Implementation

Indexed?

All tab content in HTML at load

✅ Yes

Content loaded via AJAX on tab click

❌ No

Recommendation

Server-render all tab content in the initial HTML; use CSS/JS only to show/hide. Prefer

/

or equivalent server-rendered markup. Horizontal Tabs: More Tabs, More Content? Technically : Yes—if all content is in the DOM at load, more tabs = more indexable content. Mobile-first indexing gives full weight to tabbed content in HTML. Strategically : Not always. Signal dilution occurs when many tabs = many different topics on one page. Google may struggle to understand which query the page should rank for; topical authority and keyword focus get spread thin. Scenario Use tabs? Alternative Same topic (How-to Step 1/2/3; product specs: dimensions, materials, shipping) ✅ Yes — Different topics (Service A, Service B, Portfolio, Blog) ❌ No Separate URLs per topic; see content-strategy for pillar/cluster When many horizontal tabs work : All tabs semantically related to one query (e.g., one how-to, one product). When to use separate pages : Each tab is a distinct topic deserving its own URL, crawl, and ranking opportunity. Implementation Native HTML (Recommended) Use

and

—no JavaScript required; accessible; crawlable. < details open > < summary > First question (expanded by default) < p > Answer content here. < details > < summary > Second question < p > Answer content here.

First tab/accordion

Add open attribute so it's expanded by default

: Must be first child of

; acts as toggle Progressive enhancement : Style with CSS; add JS only if needed (e.g., close others when one opens) JavaScript-Dependent Tabs If using JS-only tabs: ensure all tab content is in the DOM at page load , not loaded via AJAX on click. Google does not simulate tab clicks. Prefer

/

or server-rendered HTML. Avoid Content loaded only after user click (AJAX, lazy-loaded via fetch)—crawlers will not index it display: none or visibility: hidden for primary content—Google may treat differently Many tabs with unrelated topics on one page—causes signal dilution; use separate URLs instead Content Best Practices Practice Purpose First item expanded Ensures primary content visible on load; better for SEO and UX Descriptive headers

/ tab labels should clearly describe content; include keywords naturally Logical structure H2/H3 for sections; supports snippet extraction; see featured-snippet Answer-first For FAQ: 40–60 words direct answer; then detail; see faq-page-generator Use Cases Use case Format Layout Notes FAQ Accordion Vertical FAQPage schema; first Q expanded; see faq-page-generator How-to steps Tabs Horizontal Step 1, Step 2, Step 3; sequential flow Product specs Tabs Horizontal Dimensions, materials, shipping—secondary to hero Long guides Accordion Vertical Collapsible sections; see toc-generator Pricing tiers Tabs Horizontal Compare plans; primary CTA visible Objection handling Accordion Vertical "What about X?"—supporting conversion Schema & Rich Results FAQ (vertical accordion) : FAQPage JSON-LD; schema must match on-page content exactly; see schema-markup , faq-page-generator How-to (horizontal tabs) : HowTo schema for step-by-step content; see schema-markup , featured-snippet Other tabs : No specific schema; ensure semantic HTML (headings, structure) UX & Accessibility Visual indicator : Arrow, plus/minus, or chevron to show expand/collapse state Keyboard :

/

natively keyboard-accessible Core Web Vitals : Avoid layout shift (CLS) when expanding; reserve space or animate smoothly Mobile : Touch targets ≥44×44px; vertical accordion often better than horizontal tabs on small screens (tabs can be cramped; accordion scrolls naturally) Pre-Implementation Checklist All tab/accordion content in DOM at page load (no AJAX on click) Primary ranking content visible, not hidden First tab/accordion expanded by default Using

/

or equivalent server-rendered HTML Headers descriptive; keywords natural Tabs share one topic (avoid signal dilution); if different topics, consider separate pages For FAQ: FAQPage schema matches content