tab-accordion

SKILL.md

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