FAQ sections

Centered accordion. The HEEx side uses Phoenix.LiveView.JS.toggle + an aria-expanded flip; the React side uses Headless UI v2 Disclosure.

Preview

Frequently asked questions

: I don't know, but the flag is a big plus. Lorem ipsum dolor sit amet consectetur adipisicing elit.
: You boil the hell out of it. Lorem ipsum dolor sit amet consectetur adipisicing elit.
: Nobody knows. Lorem ipsum dolor sit amet consectetur adipisicing elit.
: Because they're so good at it. Lorem ipsum dolor sit amet.

React preview

LiveView (HEEx)

alias DesignSystem.UI.FaqSections

<FaqSections.faq_section
  id="faq"
  title="Frequently asked questions"
  faqs={[
    %{question: "What's the best thing about Switzerland?", answer: "..."},
    %{question: "How do you make holy water?", answer: "..."}
  ]}
/>

React (JSX)

import { FaqSection } from "../ui/index.mjs"

<FaqSection
  title="Frequently asked questions"
  faqs={[
    { question: "What's the best thing about Switzerland?", answer: "..." },
    { question: "How do you make holy water?", answer: "..." },
  ]}
/>