tab-accordion
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."