FreeComponent · Accordions & FAQs
FAQ Accordion
Accessible Vue 3 FAQ accordion with single or multiple open answers, smooth height animation and full ARIA wiring. Tailwind CSS, dark mode.
by Vueplay
Vue accordion and FAQ components
Accordions let people scan a list of questions or sections and open only what they need. These Vue 3 accordion and FAQ components handle open state, keyboard interaction and transitions, styled with Tailwind CSS 4 and class-based dark mode.
Items are passed as typed props, and you can choose whether one or several panels stay open. They have no dependencies besides vue and can be installed with npm or copied into your project.
FreeGood to know
Building accordions & faqs that hold up
- Use buttons with aria-expanded
- Each header should contain a real <button> with aria-expanded and aria-controls pointing at its panel. The native <details> and <summary> elements are a good zero-JavaScript alternative for simple FAQs.
- Animate height without layout thrash
- Transitioning grid-template-rows from 0fr to 1fr animates to the content height with pure CSS. It avoids measuring scrollHeight in JavaScript.
- Keep answers in the DOM
- Hiding closed panels with CSS rather than v-if keeps the text crawlable and lets browser find-in-page reach it, especially with hidden="until-found" where supported.
- Add FAQPage structured data
- If the accordion holds real FAQs, emit matching FAQPage JSON-LD in the page head. The questions and answers must match what is visible on the page.
FAQ
Questions
Can more than one accordion panel be open at once?
Yes. The components support both modes, usually through a prop that switches between single and multiple open panels.
Are these accordions keyboard accessible?
Yes. Headers are native buttons, so Tab, Enter and Space work out of the box, and the open state is exposed with aria-expanded.