tab-accordion

What this skill does

# 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" or **short action labels** (see **howto-section-generator**—labels should match H2 intent, not contradict a fixed “N steps” title) |

**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 `<details>`/`<summary>` or equivalent server-rendered markup. See **rendering-strategies** for SSR, SSG, CSR and crawler visibility.

### 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 `<details>` and `<summary>`—no JavaScript required; accessible; crawlable.

```html
<details open>
  <summary>First question (expanded by default)</summary>
  <p>Answer content here.</p>
</details>
<details>
  <summary>Second question</summary>
  <p>Answer content here.</p>
</details>
```

- **First tab/accordion**: Add `open` attribute so it's expanded by default
- **`<summary>`**: Must be first child of `<details>`; 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 `<details>`/`<summary>` or server-rendered HTML. See **rendering-strategies**.

### 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** | `<summary>` / 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 | Numbered “Step *n*” or descriptive tab titles; sequential flow; same step count as section H2 if the H2 uses a number (**howto-section-generator**) |
| **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 **howto-section-generator**, **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**: `<details>`/`<summary>` 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 `<details>`/`<summary>` 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

## Related Skills

- **faq-page-generator**: FAQ structure, answer length, schema; accordion is common FAQ UI
- **howto-section-generator**: HowTo section; steps in tabs vs FAQ; JSON-LD alignment
- **featured-snippet**: Answer-first, H2/H3; content in accordions can be extracted
- **schema-markup**: FAQPage for FAQ accordions; HowTo for step-by-step tabs
- **content-strategy**: Pillar/cluster architecture; when to use separate pages vs tabs
- **toc-generator**: Collapsible TOC; similar disclosure pattern
- **content-optimization**: Word count, structure, multimedia in expandable sections
- **rendering-strategies**: SSR, SSG, CSR; content in initial HTML for crawlers