tab-accordion

Name: tab-accordion
Author: kostja94

753stars109forks

How to install tab-accordion?

kostja94/marketing-skills/tab-accordion

$npx -y skills add kostja94/marketing-skills --skill tab-accordion

Installs into the current project.

Summary

When the user wants to add or optimize tab or accordion components for content organization. Also use when the user mentions "tab component," "accordion," "expandable content," "collapsible sections," "tabbed content," "FAQ accordion," "how-to tabs," "horizontal tabs," "vertical

Files · 1

View on GitHub

SKILL.md

1	# Components: Tab & Accordion
2
3	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.
4
5	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.
6
7	## Layout Patterns
8
9	\| Pattern \| Layout \| Best for \| Example \|
10	\|---------\|--------\|----------\|---------\|
11	\| Vertical accordion \| Stacked; expand/collapse one at a time \| FAQ, Q&A, long lists, objection handling \| "How do I return?" → answer below \|
12	\| 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) \|
13
14	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.
15
16	## SEO: Is It Friendly?
17
18	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."
19
20	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.
21
22	\| Content type \| Placement \|
23	\|--------------\|-----------\|
24	\| Primary / ranking-focused \| Visible above fold; not hidden \|
25	\| Secondary / supporting \| Tabs, accordions acceptable \|
26	\| FAQ answers \| Accordion OK; first item expanded by default; see faq-page-generator \|
27
28	### Indexing Requirements
29
30	Content must be in the DOM on page load. Google does not simulate user clicks; it cannot "click" tabs to discover content.
31
32	\| Implementation \| Indexed? \|
33	\|----------------\|----------\|
34	\| All tab content in HTML at load \| ✅ Yes \|
35	\| Content loaded via AJAX on tab click \| ❌ No \|
36
37	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.
38
39	### Horizontal Tabs: More Tabs, More Content?
40
41	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.
42
43	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.
44
45	\| Scenario \| Use tabs? \| Alternative \|
46	\|----------\|-----------\|-------------\|
47	\| Same topic (How-to Step 1/2/3; product specs: dimensions, materials, shipping) \| ✅ Yes \| — \|
48	\| Different topics (Service A, Service B, Portfolio, Blog) \| ❌ No \| Separate URLs per topic; see content-strategy for pillar/cluster \|
49
50	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.
51
52	## Implementation
53
54	### Native HTML (Recommended)
55
56	Use `<details>` and `<summary>`—no JavaScript required; accessible; crawlable.
57
58	```html
59	<details open>
60	<summary>First question (expanded by default)</summary>
61	<p>Answer content here.</p>
62	</details>
63	<details>
64	<summary>Second question</summary>
65	<p>Answer content here.</p>
66	</details>
67	```
68
69	- First tab/accordion: Add `open` attribute so it's expanded by default
70	- `<summary>`: Must be first child of `<details>`; acts as toggle
71	- Progressive enhancement: Style with CSS; add JS only if needed (e.g., close others when one opens)
72
73	### JavaScript-Dependent Tabs
74
75	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.

People who liked this also viewed

6 picks

Type

tab-accordion

753stars109forks

View on GitHub

How to install tab-accordion?

kostja94/marketing-skills/tab-accordion

$npx -y skills add kostja94/marketing-skills --skill tab-accordion

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Components: Tab & Accordion
2
3	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.
4
5	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.
6
7	## Layout Patterns
8
9	\| Pattern \| Layout \| Best for \| Example \|
10	\|---------\|--------\|----------\|---------\|
11	\| Vertical accordion \| Stacked; expand/collapse one at a time \| FAQ, Q&A, long lists, objection handling \| "How do I return?" → answer below \|
12	\| 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) \|
13
14	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.
15
16	## SEO: Is It Friendly?
17
18	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."
19
20	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.
21
22	\| Content type \| Placement \|
23	\|--------------\|-----------\|
24	\| Primary / ranking-focused \| Visible above fold; not hidden \|
25	\| Secondary / supporting \| Tabs, accordions acceptable \|
26	\| FAQ answers \| Accordion OK; first item expanded by default; see faq-page-generator \|
27
28	### Indexing Requirements
29
30	Content must be in the DOM on page load. Google does not simulate user clicks; it cannot "click" tabs to discover content.
31
32	\| Implementation \| Indexed? \|
33	\|----------------\|----------\|
34	\| All tab content in HTML at load \| ✅ Yes \|
35	\| Content loaded via AJAX on tab click \| ❌ No \|
36
37	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.
38
39	### Horizontal Tabs: More Tabs, More Content?
40
41	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.
42
43	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.
44
45	\| Scenario \| Use tabs? \| Alternative \|
46	\|----------\|-----------\|-------------\|
47	\| Same topic (How-to Step 1/2/3; product specs: dimensions, materials, shipping) \| ✅ Yes \| — \|
48	\| Different topics (Service A, Service B, Portfolio, Blog) \| ❌ No \| Separate URLs per topic; see content-strategy for pillar/cluster \|
49
50	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.
51
52	## Implementation
53
54	### Native HTML (Recommended)
55
56	Use `<details>` and `<summary>`—no JavaScript required; accessible; crawlable.
57
58	```html
59	<details open>
60	<summary>First question (expanded by default)</summary>
61	<p>Answer content here.</p>
62	</details>
63	<details>
64	<summary>Second question</summary>
65	<p>Answer content here.</p>
66	</details>
67	```
68
69	- First tab/accordion: Add `open` attribute so it's expanded by default
70	- `<summary>`: Must be first child of `<details>`; acts as toggle
71	- Progressive enhancement: Style with CSS; add JS only if needed (e.g., close others when one opens)
72
73	### JavaScript-Dependent Tabs
74
75	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.

People who liked this also viewed

6 picks

Type