skills.rest
kostja94
kostja94COMMUNITY
Explore all skills by this author →
WebsiteGitHub

tab-accordion

Implement tab and accordion components with native HTML details and summary elements.

872|122|Updated Feb 26, 2026
Search Tags:#SEO#UX#web design#tabs#content organization#accordion
One-click install
npx skills add https://github.com/kostja94/marketing-skills --skill tab-accordion
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tab-accordion
Source: https://github.com/kostja94/marketing-skills/tree/main/skills/components/content/tab-accordion
Command: npx skills add https://github.com/kostja94/marketing-skills --skill tab-accordion

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps organize content efficiently, preventing excessive vertical scrolling and improving user experience on web pages.

Core Features & Use Cases

  • Vertical Accordion: Ideal for FAQs, Q&A, or long lists where content is stacked and expandable.
  • Horizontal Tabs: Best for step-by-step guides, product comparisons, or feature breakdowns.
  • SEO Considerations: Ensures content within tabs/accordions is indexable by search engines when implemented correctly.
  • Use Case: Implement an FAQ section on a product page using a vertical accordion to keep the page clean while providing detailed answers to common questions.

Quick Start

Implement a vertical accordion for FAQ content using native HTML elements.

Frequently Asked Questions about tab-accordion

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
Are tabs and accordions bad for SEO if I use them to organize long web page content?▼

Using native HTML elements like <details> and <summary> for accordions ensures content remains in the DOM for indexing. This approach provides accessible disclosure widgets without requiring JavaScript to render text.

What is the best way to implement an accessible accordion for an FAQ section?▼

Using native HTML elements like <details> and <summary> for accordions ensures content remains in the DOM for indexing. This approach provides accessible disclosure widgets without requiring JavaScript to render text.

How do I choose between vertical accordions and horizontal tabs for mobile UX?▼

Vertical accordions are ideal for FAQs and stacked lists, while horizontal tabs suit step-by-step guides. For mobile UX, accordions often adapt better to narrow screens compared to horizontal tab layouts.

Does hidden content inside an accordion still get indexed by search engines?▼

Yes, hidden content inside accordions gets indexed by search engines as long as it is included in the DOM. Ensuring DOM inclusion is the primary SEO consideration when building disclosure widgets.

When should I not use tabs for web design content organization?▼

You should not use horizontal tabs for very long lists or FAQs where stacked expansion is more intuitive. Tabs work best for step-by-step guides and feature breakdowns rather than extensive text lists.

Related Skills

Explore More Content & Communication Skills→
Software-Design-ClubSoftware-Design-Club
1

Frontend Accessibility

Guide developers to implement accessible UI components with ARIA and keyboard navigation.

Official
Basic
ofelixdevofelixdev

seo

Optimize web content with technical and on-page SEO strategies.

Community
Intermediate
gcomartinsgcomartins

responsive-web-design

Implement mobile-first responsive design with fluid typography and responsive breakpoints.

Community
Intermediate
jorgeasaurusjorgeasaurus
12

playground

Generate interactive single-file HTML playgrounds with customizable templates.

Community
Advanced