FAQ — Nested topic disclosures

Two outer topic disclosures each contain two independent question disclosures. Use it to keep both topics and their answers compact.

ReactHTML

1440 × 900

Open in new tab

Component.tsx40 lines

export default function FaqNestedTopics() {
  return (
    <section className="bg-white text-neutral-900">
      <div className="mx-auto max-w-6xl px-6 py-16 sm:py-24 ">
        <header className="mx-auto max-w-2xl text-center">
          <p className="text-sm font-medium text-neutral-500">Eyebrow for the section</p>
          <h2 className="mt-4 text-3xl font-semibold tracking-tight text-balance sm:text-4xl">Heading for exploring question topics</h2>
        </header>
        <div className="mx-auto mt-10 max-w-3xl border-t border-neutral-200">
          <details className="group/topic border-b border-neutral-200">
            <summary className="flex cursor-pointer list-none items-center justify-between gap-4 py-6 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 [&::-webkit-details-marker]:hidden"><span><span className="block text-lg font-semibold">Getting started</span><span className="mt-1 block text-sm text-neutral-500">Questions about beginning and requirements</span></span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-5 shrink-0 transition-transform group-open/topic:rotate-180"><path d="m6 9 6 6 6-6" /></svg></summary>
            <div className="mb-6 rounded-lg border border-neutral-200 bg-neutral-50 px-6">
              <details  className="group border-b border-neutral-200">
                <summary className="flex cursor-pointer list-none items-center justify-between gap-4 py-5 text-base font-semibold focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 [&::-webkit-details-marker]:hidden">How do I get started?<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-5 shrink-0 transition-transform group-open:rotate-180"><path d="m6 9 6 6 6-6" /></svg></summary>
                <p className="pb-5 text-sm text-pretty text-neutral-600">Explain the first action, the prerequisites and the confirmation readers should expect.</p>
              </details>
              <details  className="group border-b border-neutral-200">
                <summary className="flex cursor-pointer list-none items-center justify-between gap-4 py-5 text-base font-semibold focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 [&::-webkit-details-marker]:hidden">What is included?<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-5 shrink-0 transition-transform group-open:rotate-180"><path d="m6 9 6 6 6-6" /></svg></summary>
                <p className="pb-5 text-sm text-pretty text-neutral-600">Name the main inclusions and any limits that affect the decision.</p>
              </details>
            </div>
          </details>
          <details className="group/topic border-b border-neutral-200">
            <summary className="flex cursor-pointer list-none items-center justify-between gap-4 py-6 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 [&::-webkit-details-marker]:hidden"><span><span className="block text-lg font-semibold">Making changes</span><span className="mt-1 block text-sm text-neutral-500">Questions about changes and support</span></span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-5 shrink-0 transition-transform group-open/topic:rotate-180"><path d="m6 9 6 6 6-6" /></svg></summary>
            <div className="mb-6 rounded-lg border border-neutral-200 bg-neutral-50 px-6">
              <details  className="group border-b border-neutral-200">
                <summary className="flex cursor-pointer list-none items-center justify-between gap-4 py-5 text-base font-semibold focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 [&::-webkit-details-marker]:hidden">How can I make changes?<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-5 shrink-0 transition-transform group-open:rotate-180"><path d="m6 9 6 6 6-6" /></svg></summary>
                <p className="pb-5 text-sm text-pretty text-neutral-600">Describe where changes are made and when the result becomes available.</p>
              </details>
              <details  className="group border-b border-neutral-200">
                <summary className="flex cursor-pointer list-none items-center justify-between gap-4 py-5 text-base font-semibold focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 [&::-webkit-details-marker]:hidden">Where can I get help?<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-5 shrink-0 transition-transform group-open:rotate-180"><path d="m6 9 6 6 6-6" /></svg></summary>
                <p className="pb-5 text-sm text-pretty text-neutral-600">Name the best route for additional questions and the details to provide.</p>
              </details>
            </div>
          </details>
        </div>
      </div>
    </section>
  )
}

Pattern notes

When to use: Use when the FAQ needs two levels of navigation. Choose grouped topic cards when all questions should stay visible. Variations include three topics or one initially open outer group.
Hierarchy: First scan two 18px topic titles and their 14px captions, then individual 16px questions. Keep titles below 4 words, captions below 8, questions below 9 and answers below 50.
Responsive: The centered list remains stacked at every width. Side padding and natural wrapping keep both disclosure levels within narrow screens.
Layout: The white section uses a 1152px max-w-6xl container, 24px px-6 sides and 64px py-16 vertical padding, increasing to 96px sm:py-24 at 640px. A max-w-3xl centered topic list begins 40px below the heading. Outer summaries have 24px vertical padding and stacked title/caption text. Their inner questions sit in a p-x-6 neutral-50 panel with 20px summary padding and bottom rules.
States: Native outer and inner details open independently. Each level rotates only its own chevron, and all summaries show 2px focus outlines. Closing a topic retains the nested disclosure state.

Desktop wireframe

┌──────────────────────────────────────────────────────────────┐
│                  Heading for exploring topics                │
│ ┌─────────────────────────────────────────────────────────┐  │
│ │ [Getting started v]                                     │  │
│ │   [How do I get started? v]                             │  │
│ │     Answer when opened                                  │  │
│ │   [What is included? v]                                 │  │
│ ├─────────────────────────────────────────────────────────┤  │
│ │ [Making changes v]                                      │  │
│ │   [How can I make changes? v]                           │  │
│ │   [Where can I get help? v]                             │  │
│ └─────────────────────────────────────────────────────────┘  │
└──────────────────────────────────────────────────────────────┘

View all

FAQ — Accordion
Layout tags: centered,list,spacious
FAQ — Accordion beside image
Layout tags: asymmetric,media,list
FAQ — Accordion beside intro
Layout tags: asymmetric,list

FAQ — Nested topic disclosures

Pattern notes

More in FAQ

FAQ — Accordion

FAQ — Accordion beside image

FAQ — Accordion beside intro