Johnson & Johnson
Technology Services
PN

Accordion

A vertically-stacked set of interactive headings that reveal associated content. Backed by Radix Accordion; aligned with J&J DS v1.2. Exports from @jnj/design-system/accordion. Supports both single-open and multi-open modes (type="single" collapsible vs type="multiple").

Single (collapsible) — chevron trigger

Only one item open at a time. Click an open item to collapse it.

Submit a ticket in ServiceNow. Access is granted within 24 hours.

Show source
<Accordion type="single" collapsible defaultValue="q1">
  <AccordionItem value="q1">
    <AccordionTrigger>How do I request access?</AccordionTrigger>
    <AccordionContent>Submit a ticket in ServiceNow…</AccordionContent>
  </AccordionItem>
  …
</Accordion>

Plus / minus trigger icon (triggerIcon="plus-minus")

Plus when closed; minus when open. Figma DS offers both chevron (default) and plus/minus styles.

Diagnosed with Type 2 diabetes in 2022. Switched to combination therapy 6 months ago with positive HbA1c trend.

Show source
<Accordion type="multiple" triggerIcon="plus-minus" defaultValue={["a"]}>
  <AccordionItem value="a">
    <AccordionTrigger>Patient history</AccordionTrigger>
    <AccordionContent>…</AccordionContent>
  </AccordionItem>
</Accordion>

Sizes — small / medium / large

Adjusts trigger padding (py) and font scale. Small maps to body-md; Medium (default) to body-lg; Large to heading-sm.

Tight density for sidebars and dense forms.

For page-level sections or FAQ landing pages.

Show source
<Accordion size="sm" type="single" collapsible>…</Accordion>
<Accordion size="md" type="single" collapsible>…</Accordion>
<Accordion size="lg" type="single" collapsible>…</Accordion>

Flush (flush=true)

Removes trigger/content horizontal padding. Use when the accordion sits inside a container that already provides inset (e.g. a Card body).

Inside a container:

No extra horizontal padding — content aligns to the container edge.

Show source
<Accordion flush type="single" collapsible>…</Accordion>

Multiple open (type='multiple')

Any number of items can be open simultaneously.

Enrolled / Withdrawn / Completed / Screen failure

Chicago / Boston / Mexico City / London

Show source
<Accordion type="multiple" defaultValue={["m-a", "m-b"]}>…</Accordion>