ComponentsContent

FAQ Accordion

Accordion built on native HTML details/summary. No JavaScript needed, fully accessible, keyboard navigable.

Preview

Questions.

Is it free?

Yes. BSD and MIT licensed, open source on GitHub.

Does it support Markdown?

Yes, via the optional markdown extra.

Can I use Tailwind?

Yes. Nitro outputs plain HTML, so any CSS framework works.

Code

from nitro_ui import Div, H2, Section, Partial


FAQS = [
    {"q": "Is it free?", "a": "Yes. BSD and MIT licensed, open source on GitHub."},
    {"q": "Does it support Markdown?", "a": "Yes, via the optional markdown extra."},
    {"q": "Can I use Tailwind?", "a": "Yes. Nitro outputs plain HTML, so any CSS framework works."},
]


def FaqItem(item):
    return Partial(
        f"""<details class="faq-item">
  <summary class="faq-question">{item["q"]}</summary>
  <div class="faq-answer"><p>{item["a"]}</p></div>
</details>"""
    )


def Faq():
    return Section(
        Div(
            H2("Questions.", cls="section-title"),
            Div(*[FaqItem(f) for f in FAQS], cls="faq-list"),
            cls="container faq-container",
        ),
        cls="faq-section",
    )
PreviousTestimonialNextFooter