FAQ Accordions

Our documentation includes a custom, reusable <FAQ> component that allows you to create interactive, collapsible accordion menus. This is perfect for organizing long troubleshooting pages or grouping common billing questions.

---

How to Build Accordions

Create clean, collapsible Q&A sections without heavy third-party plugins:

1. Use Semantic HTML: Wrap your content in standard HTML <details> and <summary> tags.
2. Add Question Text: Place the question string directly inside the <summary> element.
3. Wrap the Answer: Enclose the corresponding explanation in paragraph tags below the summary.

Behind the Curtain: FAQ Component

1. Rendered Specimen

How the interactive accordion renders on the live site.

What is your refund policy?+

We offer a full refund within the first 30 days of your subscription.

To request a refund, please contact Support.

2. Underlying MDX Code

The raw component syntax required to generate the accordion.

import FAQ from '../../../components/FAQ.astro';

<FAQ title="What is your refund policy?">
We offer a full refund within the first **30 days** of your subscription.

To request a refund, please contact Support.
</FAQ>

3. Sveltia CMS Authoring

How authors insert FAQs within the CMS.

To use the FAQ component in your article, you must first import it at the top of your document, and then wrap your content in the <FAQ> tags. Provide the question inside the title="" attribute, and place the answer between the opening and closing tags. You can use standard Markdown (like bolding, lists, and links) inside the answer!

For more details on toggling between visual and raw markdown editing in Sveltia, see Inserting Custom Components (CMS Magic).

Caution

Because this is a custom component, add this exact line to the very top of your article: import FAQ from '../../../components/FAQ.astro';[cite: 5]. Ensure the relative path matches the folder depth of your current document!