Accordion

A group of Collapsible components that open and close when pressed, showing or hiding content.

styleKeys: accordionscriptKeys: accordion

UsageGuidelinesAPI

Use Accordion...

To present a large amount of content in a compact form.
To break down information into manageable sections, especially if the content is categorized.
To prevent information overload by allowing users to expand only the sections they are interested in.
For FAQs sections.

Don't use Accordion...

To display critical information. Use a Modal Dialog instead.
To present a small amount of content where the benefit of collapsing/expanding is minimal. Use a Card instead.
To navigate through the page. Use Tabs instead.

Multiple

In the React API, by default multiple Collapsibles can be expanded simultaneously.

In the Vanilla API, add the swan-accordion-multiple class to the element that has the swan-accordion class to enable this functionality.

ReactVanilla

<Accordion>
  <BasicCollapsible collapsibleId="coll-one" heading="Summary 1">
    Content 1.
  </BasicCollapsible>
  <BasicCollapsible collapsibleId="coll-two" heading="Summary 2">
    Content 2.
  </BasicCollapsible>
</Accordion>

<Accordion>
  <BasicCollapsible collapsibleId="coll-one" heading="Summary 1">
    Content 1.
  </BasicCollapsible>
  <BasicCollapsible collapsibleId="coll-two" heading="Summary 2">
    Content 2.
  </BasicCollapsible>
</Accordion>

<div class="swan-accordion swan-accordion-multiple">
  <div aria-disabled="false" class="swan-collapsible">
    <div class="swan-collapsible-summary">
      <button
        aria-expanded="false"
        class="swan-collapsible-summary-button"
        aria-controls="content-1"
      >
        Summary 1
      </button>
    </div>
    <div class="swan-collapsible-content" id="content-1">Content 1.</div>
  </div>
  <div aria-disabled="false" class="swan-collapsible">
    <div class="swan-collapsible-summary">
      <button
        aria-expanded="false"
        class="swan-collapsible-summary-button"
        aria-controls="content-2"
      >
        Summary 2
      </button>
    </div>
    <div class="swan-collapsible-content" id="content-2">Content 2.</div>
  </div>
</div>

<div class="swan-accordion swan-accordion-multiple">
  <div aria-disabled="false" class="swan-collapsible">
    <div class="swan-collapsible-summary">
      <button
        aria-expanded="false"
        class="swan-collapsible-summary-button"
        aria-controls="content-1"
      >
        Summary 1
      </button>
    </div>
    <div class="swan-collapsible-content" id="content-1">Content 1.</div>
  </div>
  <div aria-disabled="false" class="swan-collapsible">
    <div class="swan-collapsible-summary">
      <button
        aria-expanded="false"
        class="swan-collapsible-summary-button"
        aria-controls="content-2"
      >
        Summary 2
      </button>
    </div>
    <div class="swan-collapsible-content" id="content-2">Content 2.</div>
  </div>
</div>

Single

In the React API, use single to ensure that only one Collapsible is expanded at any given time.

In the Vanilla API, by default only one Collapsible can be expanded at any given time.

ReactVanilla

<Accordion single>
  <BasicCollapsible collapsibleId="coll-one" heading="Summary 1">
    Content 1.
  </BasicCollapsible>
  <BasicCollapsible collapsibleId="coll-two" heading="Summary 2">
    Content 2.
  </BasicCollapsible>
</Accordion>

<Accordion single>
  <BasicCollapsible collapsibleId="coll-one" heading="Summary 1">
    Content 1.
  </BasicCollapsible>
  <BasicCollapsible collapsibleId="coll-two" heading="Summary 2">
    Content 2.
  </BasicCollapsible>
</Accordion>

<div class="swan-accordion">
  <div aria-disabled="false" class="swan-collapsible">
    <div class="swan-collapsible-summary">
      <button
        aria-expanded="false"
        class="swan-collapsible-summary-button"
        aria-controls="content-1"
      >
        Summary 1
      </button>
    </div>
    <div class="swan-collapsible-content" id="content-1">Content 1.</div>
  </div>
  <div aria-disabled="false" class="swan-collapsible">
    <div class="swan-collapsible-summary">
      <button
        aria-expanded="false"
        class="swan-collapsible-summary-button"
        aria-controls="content-2"
      >
        Summary 2
      </button>
    </div>
    <div class="swan-collapsible-content" id="content-2">Content 2.</div>
  </div>
</div>

<div class="swan-accordion">
  <div aria-disabled="false" class="swan-collapsible">
    <div class="swan-collapsible-summary">
      <button
        aria-expanded="false"
        class="swan-collapsible-summary-button"
        aria-controls="content-1"
      >
        Summary 1
      </button>
    </div>
    <div class="swan-collapsible-content" id="content-1">Content 1.</div>
  </div>
  <div aria-disabled="false" class="swan-collapsible">
    <div class="swan-collapsible-summary">
      <button
        aria-expanded="false"
        class="swan-collapsible-summary-button"
        aria-controls="content-2"
      >
        Summary 2
      </button>
    </div>
    <div class="swan-collapsible-content" id="content-2">Content 2.</div>
  </div>
</div>

Accordions as List

Use the following HTML tags for when the Accordion is semantically a list:

In the React API, use purpose="list" on the Accordion.
In the Vanilla API, use a ul tag for the Accordion, and li tags for each Collapsible within it.

ReactVanilla

<Accordion single>
  <BasicCollapsible collapsibleId="coll-one" heading="Summary 1">
    Content 1.
  </BasicCollapsible>
  <BasicCollapsible collapsibleId="coll-two" heading="Summary 2">
    Content 2.
  </BasicCollapsible>
</Accordion>

<Accordion single>
  <BasicCollapsible collapsibleId="coll-one" heading="Summary 1">
    Content 1.
  </BasicCollapsible>
  <BasicCollapsible collapsibleId="coll-two" heading="Summary 2">
    Content 2.
  </BasicCollapsible>
</Accordion>

<ol class="swan-accordion">
  <li aria-disabled="false" class="swan-collapsible">
    <div class="swan-collapsible-summary">
      <button
        aria-expanded="false"
        class="swan-collapsible-summary-button"
        aria-controls="collapsible-1"
      >
        Summary 1
      </button>
    </div>
    <div class="swan-collapsible-content" id="collapsible-1">Content 1.</div>
  </li>
  <li aria-disabled="false" class="swan-collapsible">
    <div class="swan-collapsible-summary">
      <button
        aria-expanded="false"
        class="swan-collapsible-summary-button"
        aria-controls="collapsible-2"
      >
        Summary 2
      </button>
    </div>
    <div class="swan-collapsible-content" id="collapsible-2">Content 2.</div>
  </li>
</ol>

<ol class="swan-accordion">
  <li aria-disabled="false" class="swan-collapsible">
    <div class="swan-collapsible-summary">
      <button
        aria-expanded="false"
        class="swan-collapsible-summary-button"
        aria-controls="collapsible-1"
      >
        Summary 1
      </button>
    </div>
    <div class="swan-collapsible-content" id="collapsible-1">Content 1.</div>
  </li>
  <li aria-disabled="false" class="swan-collapsible">
    <div class="swan-collapsible-summary">
      <button
        aria-expanded="false"
        class="swan-collapsible-summary-button"
        aria-controls="collapsible-2"
      >
        Summary 2
      </button>
    </div>
    <div class="swan-collapsible-content" id="collapsible-2">Content 2.</div>
  </li>
</ol>

Full bleed

Use fullBleed to remove the right padding of the content within every Collapsible component of the Accordion.

ReactVanilla

<Accordion fullBleed>
  <BasicCollapsible collapsibleId="coll-one" heading="Summary 1">
    Content 1 using full bleed. This collapsible's content will go all the way
    out to the right edge. This collapsible's content will go all the way out to
    the right edge. This collapsible's content will go all the way out to the
    right edge. This collapsible's content will go all the way out to the right
    edge.
  </BasicCollapsible>
  <BasicCollapsible collapsibleId="coll-two" heading="Summary 2">
    Content 2 using full bleed. This collapsible's content will go all the way
    out to the right edge. This collapsible's content will go all the way out to
    the right edge. This collapsible's content will go all the way out to the
    right edge. This collapsible's content will go all the way out to the right
    edge.
  </BasicCollapsible>
</Accordion>

<Accordion fullBleed>
  <BasicCollapsible collapsibleId="coll-one" heading="Summary 1">
    Content 1 using full bleed. This collapsible's content will go all the way
    out to the right edge. This collapsible's content will go all the way out to
    the right edge. This collapsible's content will go all the way out to the
    right edge. This collapsible's content will go all the way out to the right
    edge.
  </BasicCollapsible>
  <BasicCollapsible collapsibleId="coll-two" heading="Summary 2">
    Content 2 using full bleed. This collapsible's content will go all the way
    out to the right edge. This collapsible's content will go all the way out to
    the right edge. This collapsible's content will go all the way out to the
    right edge. This collapsible's content will go all the way out to the right
    edge.
  </BasicCollapsible>
</Accordion>

<div class="swan-accordion swan-accordion-full-bleed">
  <div aria-disabled="false" class="swan-collapsible">
    <div class="swan-collapsible-summary">
      <button
        aria-expanded="false"
        class="swan-collapsible-summary-button"
        aria-controls="content-1"
      >
        Summary 1
      </button>
    </div>
    <div class="swan-collapsible-content" id="content-1">
      Content 1 using full bleed. This collapsible's content will go all the way
      out to the right edge. This collapsible's content will go all the way out
      to the right edge. This collapsible's content will go all the way out to
      the right edge. This collapsible's content will go all the way out to the
      right edge.
    </div>
  </div>
  <div aria-disabled="false" class="swan-collapsible">
    <div class="swan-collapsible-summary">
      <button
        aria-expanded="false"
        class="swan-collapsible-summary-button"
        aria-controls="content-2"
      >
        Summary 2
      </button>
    </div>
    <div class="swan-collapsible-content" id="content-2">
      Content 2 using full bleed. This collapsible's content will go all the way
      out to the right edge. This collapsible's content will go all the way out
      to the right edge. This collapsible's content will go all the way out to
      the right edge. This collapsible's content will go all the way out to the
      right edge.
    </div>
  </div>
</div>

<div class="swan-accordion swan-accordion-full-bleed">
  <div aria-disabled="false" class="swan-collapsible">
    <div class="swan-collapsible-summary">
      <button
        aria-expanded="false"
        class="swan-collapsible-summary-button"
        aria-controls="content-1"
      >
        Summary 1
      </button>
    </div>
    <div class="swan-collapsible-content" id="content-1">
      Content 1 using full bleed. This collapsible's content will go all the way
      out to the right edge. This collapsible's content will go all the way out
      to the right edge. This collapsible's content will go all the way out to
      the right edge. This collapsible's content will go all the way out to the
      right edge.
    </div>
  </div>
  <div aria-disabled="false" class="swan-collapsible">
    <div class="swan-collapsible-summary">
      <button
        aria-expanded="false"
        class="swan-collapsible-summary-button"
        aria-controls="content-2"
      >
        Summary 2
      </button>
    </div>
    <div class="swan-collapsible-content" id="content-2">
      Content 2 using full bleed. This collapsible's content will go all the way
      out to the right edge. This collapsible's content will go all the way out
      to the right edge. This collapsible's content will go all the way out to
      the right edge. This collapsible's content will go all the way out to the
      right edge.
    </div>
  </div>
</div>

Color Swatches

Use skin="color-swatches" to wrap a large set of Color Swatches to avoid making the content excessively tall.

The CollapsibleSummaryButton shows the total number of available swatches.

ReactVanilla

<GridContainer>
  <Row>
    <Column span={3}>
      <Accordion skin="color-swatches">
        <Collapsible collapsibleId="color-swatches-one">
          <CollapsibleSummary>
            <CollapsibleSummaryButton>
              10
              <VisuallyHidden>color choices</VisuallyHidden>
            </CollapsibleSummaryButton>
          </CollapsibleSummary>
          <CollapsibleContent>
            <StandardTileSwatches>
              <SelectionSet data-testid="set1" defaultSelectedValue="indigo">
                <ColorSwatches>
                  <SelectionSetInput value="red/black">
                    <SelectionSetLabel>
                      <ColorSwatch
                        primaryColor="red"
                        secondaryColor="black"
                        accessibleText="red/black"
                      />
                    </SelectionSetLabel>
                  </SelectionSetInput>
                  <SelectionSetInput value="indigo">
                    <SelectionSetLabel>
                      <ColorSwatch
                        primaryColor="indigo"
                        accessibleText="indigo"
                      />
                    </SelectionSetLabel>
                  </SelectionSetInput>
                  <SelectionSetInput value="green">
                    <SelectionSetLabel>
                      <ColorSwatch
                        primaryColor="green"
                        accessibleText="green"
                      />
                    </SelectionSetLabel>
                  </SelectionSetInput>
                  <SelectionSetInput value="gold">
                    <SelectionSetLabel>
                      <ColorSwatch primaryColor="gold" accessibleText="gold" />
                    </SelectionSetLabel>
                  </SelectionSetInput>
                  <SelectionSetInput value="blue">
                    <SelectionSetLabel>
                      <ColorSwatch primaryColor="blue" accessibleText="blue" />
                    </SelectionSetLabel>
                  </SelectionSetInput>
                  <SelectionSetInput value="orange">
                    <SelectionSetLabel>
                      <ColorSwatch
                        primaryColor="orange"
                        accessibleText="orange"
                      />
                    </SelectionSetLabel>
                  </SelectionSetInput>
                  <SelectionSetInput value="pink">
                    <SelectionSetLabel>
                      <ColorSwatch primaryColor="pink" accessibleText="pink" />
                    </SelectionSetLabel>
                  </SelectionSetInput>
                  <SelectionSetInput value="brown">
                    <SelectionSetLabel>
                      <ColorSwatch
                        primaryColor="brown"
                        accessibleText="brown"
                      />
                    </SelectionSetLabel>
                  </SelectionSetInput>
                  <SelectionSetInput disabled value="limegreen">
                    <SelectionSetLabel>
                      <ColorSwatch
                        primaryColor="limegreen"
                        accessibleText="lime green"
                      />
                    </SelectionSetLabel>
                  </SelectionSetInput>
                  <SelectionSetInput disabled value="darkmagenta">
                    <SelectionSetLabel>
                      <ColorSwatch
                        primaryColor="darkmagenta"
                        accessibleText="dark magenta"
                      />
                    </SelectionSetLabel>
                  </SelectionSetInput>
                </ColorSwatches>
              </SelectionSet>
            </StandardTileSwatches>
          </CollapsibleContent>
        </Collapsible>
      </Accordion>
    </Column>
  </Row>
</GridContainer>

<GridContainer>
  <Row>
    <Column span={3}>
      <Accordion skin="color-swatches">
        <Collapsible collapsibleId="color-swatches-one">
          <CollapsibleSummary>
            <CollapsibleSummaryButton>
              10
              <VisuallyHidden>color choices</VisuallyHidden>
            </CollapsibleSummaryButton>
          </CollapsibleSummary>
          <CollapsibleContent>
            <StandardTileSwatches>
              <SelectionSet data-testid="set1" defaultSelectedValue="indigo">
                <ColorSwatches>
                  <SelectionSetInput value="red/black">
                    <SelectionSetLabel>
                      <ColorSwatch
                        primaryColor="red"
                        secondaryColor="black"
                        accessibleText="red/black"
                      />
                    </SelectionSetLabel>
                  </SelectionSetInput>
                  <SelectionSetInput value="indigo">
                    <SelectionSetLabel>
                      <ColorSwatch
                        primaryColor="indigo"
                        accessibleText="indigo"
                      />
                    </SelectionSetLabel>
                  </SelectionSetInput>
                  <SelectionSetInput value="green">
                    <SelectionSetLabel>
                      <ColorSwatch
                        primaryColor="green"
                        accessibleText="green"
                      />
                    </SelectionSetLabel>
                  </SelectionSetInput>
                  <SelectionSetInput value="gold">
                    <SelectionSetLabel>
                      <ColorSwatch primaryColor="gold" accessibleText="gold" />
                    </SelectionSetLabel>
                  </SelectionSetInput>
                  <SelectionSetInput value="blue">
                    <SelectionSetLabel>
                      <ColorSwatch primaryColor="blue" accessibleText="blue" />
                    </SelectionSetLabel>
                  </SelectionSetInput>
                  <SelectionSetInput value="orange">
                    <SelectionSetLabel>
                      <ColorSwatch
                        primaryColor="orange"
                        accessibleText="orange"
                      />
                    </SelectionSetLabel>
                  </SelectionSetInput>
                  <SelectionSetInput value="pink">
                    <SelectionSetLabel>
                      <ColorSwatch primaryColor="pink" accessibleText="pink" />
                    </SelectionSetLabel>
                  </SelectionSetInput>
                  <SelectionSetInput value="brown">
                    <SelectionSetLabel>
                      <ColorSwatch
                        primaryColor="brown"
                        accessibleText="brown"
                      />
                    </SelectionSetLabel>
                  </SelectionSetInput>
                  <SelectionSetInput disabled value="limegreen">
                    <SelectionSetLabel>
                      <ColorSwatch
                        primaryColor="limegreen"
                        accessibleText="lime green"
                      />
                    </SelectionSetLabel>
                  </SelectionSetInput>
                  <SelectionSetInput disabled value="darkmagenta">
                    <SelectionSetLabel>
                      <ColorSwatch
                        primaryColor="darkmagenta"
                        accessibleText="dark magenta"
                      />
                    </SelectionSetLabel>
                  </SelectionSetInput>
                </ColorSwatches>
              </SelectionSet>
            </StandardTileSwatches>
          </CollapsibleContent>
        </Collapsible>
      </Accordion>
    </Column>
  </Row>
</GridContainer>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-3">
      <div class="swan-accordion swan-accordion-skin-color-swatches">
        <div aria-disabled="false" class="swan-collapsible">
          <div class="swan-collapsible-summary">
            <button
              aria-expanded="false"
              class="swan-collapsible-summary-button"
              aria-controls="auto-id-ha6e6oguq-124"
            >
              10 <span class="swan-visually-hidden">color choices</span>
            </button>
          </div>
          <div class="swan-collapsible-content" id="auto-id-ha6e6oguq-124">
            <div class="swan-standard-tile-swatches">
              <div
                data-testid="set1"
                role="radiogroup"
                class="swan-selection-set"
              >
                <div class="swan-color-swatches">
                  <input
                    type="radio"
                    class="swan-selection-set-input swan-radio"
                    value="red/black"
                    id="auto-id-ha6e6oguq-113"
                    name="auto-id-ha6e6oguq-123"
                  /><label
                    class="swan-selection-set-label"
                    for="auto-id-ha6e6oguq-113"
                    ><span class="swan-color-swatch-wrapper"
                      ><div
                        aria-disabled="false"
                        role="presentation"
                        class="swan-color-swatch"
                        style="background-color: red; color: black;"
                      ></div>
                      <span
                        class="swan-color-swatch-accessible-label swan-visually-hidden"
                        >color red/black</span
                      ></span
                    ></label
                  ><input
                    type="radio"
                    class="swan-selection-set-input swan-radio"
                    value="indigo"
                    checked=""
                    id="auto-id-ha6e6oguq-114"
                    name="auto-id-ha6e6oguq-123"
                  /><label
                    class="swan-selection-set-label"
                    for="auto-id-ha6e6oguq-114"
                    ><span class="swan-color-swatch-wrapper"
                      ><div
                        aria-disabled="false"
                        role="presentation"
                        class="swan-color-swatch"
                        style="background-color: indigo;"
                      ></div>
                      <span
                        class="swan-color-swatch-accessible-label swan-visually-hidden"
                        >color indigo</span
                      ></span
                    ></label
                  ><input
                    type="radio"
                    class="swan-selection-set-input swan-radio"
                    value="green"
                    id="auto-id-ha6e6oguq-115"
                    name="auto-id-ha6e6oguq-123"
                  /><label
                    class="swan-selection-set-label"
                    for="auto-id-ha6e6oguq-115"
                    ><span class="swan-color-swatch-wrapper"
                      ><div
                        aria-disabled="false"
                        role="presentation"
                        class="swan-color-swatch"
                        style="background-color: green;"
                      ></div>
                      <span
                        class="swan-color-swatch-accessible-label swan-visually-hidden"
                        >color green</span
                      ></span
                    ></label
                  ><input
                    type="radio"
                    class="swan-selection-set-input swan-radio"
                    value="gold"
                    id="auto-id-ha6e6oguq-116"
                    name="auto-id-ha6e6oguq-123"
                  /><label
                    class="swan-selection-set-label"
                    for="auto-id-ha6e6oguq-116"
                    ><span class="swan-color-swatch-wrapper"
                      ><div
                        aria-disabled="false"
                        role="presentation"
                        class="swan-color-swatch"
                        style="background-color: gold;"
                      ></div>
                      <span
                        class="swan-color-swatch-accessible-label swan-visually-hidden"
                        >color gold</span
                      ></span
                    ></label
                  ><input
                    type="radio"
                    class="swan-selection-set-input swan-radio"
                    value="blue"
                    id="auto-id-ha6e6oguq-117"
                    name="auto-id-ha6e6oguq-123"
                  /><label
                    class="swan-selection-set-label"
                    for="auto-id-ha6e6oguq-117"
                    ><span class="swan-color-swatch-wrapper"
                      ><div
                        aria-disabled="false"
                        role="presentation"
                        class="swan-color-swatch"
                        style="background-color: blue;"
                      ></div>
                      <span
                        class="swan-color-swatch-accessible-label swan-visually-hidden"
                        >color blue</span
                      ></span
                    ></label
                  ><input
                    type="radio"
                    class="swan-selection-set-input swan-radio"
                    value="orange"
                    id="auto-id-ha6e6oguq-118"
                    name="auto-id-ha6e6oguq-123"
                  /><label
                    class="swan-selection-set-label"
                    for="auto-id-ha6e6oguq-118"
                    ><span class="swan-color-swatch-wrapper"
                      ><div
                        aria-disabled="false"
                        role="presentation"
                        class="swan-color-swatch"
                        style="background-color: orange;"
                      ></div>
                      <span
                        class="swan-color-swatch-accessible-label swan-visually-hidden"
                        >color orange</span
                      ></span
                    ></label
                  ><input
                    type="radio"
                    class="swan-selection-set-input swan-radio"
                    value="pink"
                    id="auto-id-ha6e6oguq-119"
                    name="auto-id-ha6e6oguq-123"
                  /><label
                    class="swan-selection-set-label"
                    for="auto-id-ha6e6oguq-119"
                    ><span class="swan-color-swatch-wrapper"
                      ><div
                        aria-disabled="false"
                        role="presentation"
                        class="swan-color-swatch"
                        style="background-color: pink;"
                      ></div>
                      <span
                        class="swan-color-swatch-accessible-label swan-visually-hidden"
                        >color pink</span
                      ></span
                    ></label
                  ><input
                    type="radio"
                    class="swan-selection-set-input swan-radio"
                    value="brown"
                    id="auto-id-ha6e6oguq-120"
                    name="auto-id-ha6e6oguq-123"
                  /><label
                    class="swan-selection-set-label"
                    for="auto-id-ha6e6oguq-120"
                    ><span class="swan-color-swatch-wrapper"
                      ><div
                        aria-disabled="false"
                        role="presentation"
                        class="swan-color-swatch"
                        style="background-color: brown;"
                      ></div>
                      <span
                        class="swan-color-swatch-accessible-label swan-visually-hidden"
                        >color brown</span
                      ></span
                    ></label
                  ><input
                    type="radio"
                    disabled=""
                    class="swan-selection-set-input swan-radio"
                    value="limegreen"
                    id="auto-id-ha6e6oguq-121"
                    name="auto-id-ha6e6oguq-123"
                  /><label
                    class="swan-selection-set-label"
                    for="auto-id-ha6e6oguq-121"
                    ><span class="swan-color-swatch-wrapper"
                      ><div
                        aria-disabled="false"
                        role="presentation"
                        class="swan-color-swatch"
                        style="background-color: limegreen;"
                      ></div>
                      <span
                        class="swan-color-swatch-accessible-label swan-visually-hidden"
                        >color lime green</span
                      ></span
                    ></label
                  ><input
                    type="radio"
                    disabled=""
                    class="swan-selection-set-input swan-radio"
                    value="darkmagenta"
                    id="auto-id-ha6e6oguq-122"
                    name="auto-id-ha6e6oguq-123"
                  /><label
                    class="swan-selection-set-label"
                    for="auto-id-ha6e6oguq-122"
                    ><span class="swan-color-swatch-wrapper"
                      ><div
                        aria-disabled="false"
                        role="presentation"
                        class="swan-color-swatch"
                        style="background-color: darkmagenta;"
                      ></div>
                      <span
                        class="swan-color-swatch-accessible-label swan-visually-hidden"
                        >color dark magenta</span
                      ></span
                    ></label
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="swan-grid-container">
  <div class="swan-row">
    <div class="swan-col-3">
      <div class="swan-accordion swan-accordion-skin-color-swatches">
        <div aria-disabled="false" class="swan-collapsible">
          <div class="swan-collapsible-summary">
            <button
              aria-expanded="false"
              class="swan-collapsible-summary-button"
              aria-controls="auto-id-ha6e6oguq-124"
            >
              10 <span class="swan-visually-hidden">color choices</span>
            </button>
          </div>
          <div class="swan-collapsible-content" id="auto-id-ha6e6oguq-124">
            <div class="swan-standard-tile-swatches">
              <div
                data-testid="set1"
                role="radiogroup"
                class="swan-selection-set"
              >
                <div class="swan-color-swatches">
                  <input
                    type="radio"
                    class="swan-selection-set-input swan-radio"
                    value="red/black"
                    id="auto-id-ha6e6oguq-113"
                    name="auto-id-ha6e6oguq-123"
                  /><label
                    class="swan-selection-set-label"
                    for="auto-id-ha6e6oguq-113"
                    ><span class="swan-color-swatch-wrapper"
                      ><div
                        aria-disabled="false"
                        role="presentation"
                        class="swan-color-swatch"
                        style="background-color: red; color: black;"
                      ></div>
                      <span
                        class="swan-color-swatch-accessible-label swan-visually-hidden"
                        >color red/black</span
                      ></span
                    ></label
                  ><input
                    type="radio"
                    class="swan-selection-set-input swan-radio"
                    value="indigo"
                    checked=""
                    id="auto-id-ha6e6oguq-114"
                    name="auto-id-ha6e6oguq-123"
                  /><label
                    class="swan-selection-set-label"
                    for="auto-id-ha6e6oguq-114"
                    ><span class="swan-color-swatch-wrapper"
                      ><div
                        aria-disabled="false"
                        role="presentation"
                        class="swan-color-swatch"
                        style="background-color: indigo;"
                      ></div>
                      <span
                        class="swan-color-swatch-accessible-label swan-visually-hidden"
                        >color indigo</span
                      ></span
                    ></label
                  ><input
                    type="radio"
                    class="swan-selection-set-input swan-radio"
                    value="green"
                    id="auto-id-ha6e6oguq-115"
                    name="auto-id-ha6e6oguq-123"
                  /><label
                    class="swan-selection-set-label"
                    for="auto-id-ha6e6oguq-115"
                    ><span class="swan-color-swatch-wrapper"
                      ><div
                        aria-disabled="false"
                        role="presentation"
                        class="swan-color-swatch"
                        style="background-color: green;"
                      ></div>
                      <span
                        class="swan-color-swatch-accessible-label swan-visually-hidden"
                        >color green</span
                      ></span
                    ></label
                  ><input
                    type="radio"
                    class="swan-selection-set-input swan-radio"
                    value="gold"
                    id="auto-id-ha6e6oguq-116"
                    name="auto-id-ha6e6oguq-123"
                  /><label
                    class="swan-selection-set-label"
                    for="auto-id-ha6e6oguq-116"
                    ><span class="swan-color-swatch-wrapper"
                      ><div
                        aria-disabled="false"
                        role="presentation"
                        class="swan-color-swatch"
                        style="background-color: gold;"
                      ></div>
                      <span
                        class="swan-color-swatch-accessible-label swan-visually-hidden"
                        >color gold</span
                      ></span
                    ></label
                  ><input
                    type="radio"
                    class="swan-selection-set-input swan-radio"
                    value="blue"
                    id="auto-id-ha6e6oguq-117"
                    name="auto-id-ha6e6oguq-123"
                  /><label
                    class="swan-selection-set-label"
                    for="auto-id-ha6e6oguq-117"
                    ><span class="swan-color-swatch-wrapper"
                      ><div
                        aria-disabled="false"
                        role="presentation"
                        class="swan-color-swatch"
                        style="background-color: blue;"
                      ></div>
                      <span
                        class="swan-color-swatch-accessible-label swan-visually-hidden"
                        >color blue</span
                      ></span
                    ></label
                  ><input
                    type="radio"
                    class="swan-selection-set-input swan-radio"
                    value="orange"
                    id="auto-id-ha6e6oguq-118"
                    name="auto-id-ha6e6oguq-123"
                  /><label
                    class="swan-selection-set-label"
                    for="auto-id-ha6e6oguq-118"
                    ><span class="swan-color-swatch-wrapper"
                      ><div
                        aria-disabled="false"
                        role="presentation"
                        class="swan-color-swatch"
                        style="background-color: orange;"
                      ></div>
                      <span
                        class="swan-color-swatch-accessible-label swan-visually-hidden"
                        >color orange</span
                      ></span
                    ></label
                  ><input
                    type="radio"
                    class="swan-selection-set-input swan-radio"
                    value="pink"
                    id="auto-id-ha6e6oguq-119"
                    name="auto-id-ha6e6oguq-123"
                  /><label
                    class="swan-selection-set-label"
                    for="auto-id-ha6e6oguq-119"
                    ><span class="swan-color-swatch-wrapper"
                      ><div
                        aria-disabled="false"
                        role="presentation"
                        class="swan-color-swatch"
                        style="background-color: pink;"
                      ></div>
                      <span
                        class="swan-color-swatch-accessible-label swan-visually-hidden"
                        >color pink</span
                      ></span
                    ></label
                  ><input
                    type="radio"
                    class="swan-selection-set-input swan-radio"
                    value="brown"
                    id="auto-id-ha6e6oguq-120"
                    name="auto-id-ha6e6oguq-123"
                  /><label
                    class="swan-selection-set-label"
                    for="auto-id-ha6e6oguq-120"
                    ><span class="swan-color-swatch-wrapper"
                      ><div
                        aria-disabled="false"
                        role="presentation"
                        class="swan-color-swatch"
                        style="background-color: brown;"
                      ></div>
                      <span
                        class="swan-color-swatch-accessible-label swan-visually-hidden"
                        >color brown</span
                      ></span
                    ></label
                  ><input
                    type="radio"
                    disabled=""
                    class="swan-selection-set-input swan-radio"
                    value="limegreen"
                    id="auto-id-ha6e6oguq-121"
                    name="auto-id-ha6e6oguq-123"
                  /><label
                    class="swan-selection-set-label"
                    for="auto-id-ha6e6oguq-121"
                    ><span class="swan-color-swatch-wrapper"
                      ><div
                        aria-disabled="false"
                        role="presentation"
                        class="swan-color-swatch"
                        style="background-color: limegreen;"
                      ></div>
                      <span
                        class="swan-color-swatch-accessible-label swan-visually-hidden"
                        >color lime green</span
                      ></span
                    ></label
                  ><input
                    type="radio"
                    disabled=""
                    class="swan-selection-set-input swan-radio"
                    value="darkmagenta"
                    id="auto-id-ha6e6oguq-122"
                    name="auto-id-ha6e6oguq-123"
                  /><label
                    class="swan-selection-set-label"
                    for="auto-id-ha6e6oguq-122"
                    ><span class="swan-color-swatch-wrapper"
                      ><div
                        aria-disabled="false"
                        role="presentation"
                        class="swan-color-swatch"
                        style="background-color: darkmagenta;"
                      ></div>
                      <span
                        class="swan-color-swatch-accessible-label swan-visually-hidden"
                        >color dark magenta</span
                      ></span
                    ></label
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Default expanded collapsibles

Use defaultExpandedCollapsibles to present certain Collapsibles as expanded by default.

ReactVanilla

<Accordion defaultExpandedCollapsibles={{ 'coll-two': true }}>
  <BasicCollapsible collapsibleId="coll-one" heading="Summary 1">
    Content 1.
  </BasicCollapsible>
  <BasicCollapsible collapsibleId="coll-two" heading="Summary 2">
    Content 2.
  </BasicCollapsible>
</Accordion>

<Accordion defaultExpandedCollapsibles={{ 'coll-two': true }}>
  <BasicCollapsible collapsibleId="coll-one" heading="Summary 1">
    Content 1.
  </BasicCollapsible>
  <BasicCollapsible collapsibleId="coll-two" heading="Summary 2">
    Content 2.
  </BasicCollapsible>
</Accordion>

<div class="swan-accordion swan-accordion-multiple">
  <div aria-disabled="false" class="swan-collapsible">
    <div class="swan-collapsible-summary">
      <button
        aria-expanded="true"
        class="swan-collapsible-summary-button"
        aria-controls="content-1"
      >
        Summary 1
      </button>
    </div>
    <div
      class="swan-collapsible-content swan-collapsible-content-open"
      id="content-1"
    >
      Content 1.
    </div>
  </div>
  <div aria-disabled="false" class="swan-collapsible">
    <div class="swan-collapsible-summary">
      <button
        aria-expanded="false"
        class="swan-collapsible-summary-button"
        aria-controls="content-2"
      >
        Summary 2
      </button>
    </div>
    <div class="swan-collapsible-content" id="content-2">Content 2.</div>
  </div>
</div>

<div class="swan-accordion swan-accordion-multiple">
  <div aria-disabled="false" class="swan-collapsible">
    <div class="swan-collapsible-summary">
      <button
        aria-expanded="true"
        class="swan-collapsible-summary-button"
        aria-controls="content-1"
      >
        Summary 1
      </button>
    </div>
    <div
      class="swan-collapsible-content swan-collapsible-content-open"
      id="content-1"
    >
      Content 1.
    </div>
  </div>
  <div aria-disabled="false" class="swan-collapsible">
    <div class="swan-collapsible-summary">
      <button
        aria-expanded="false"
        class="swan-collapsible-summary-button"
        aria-controls="content-2"
      >
        Summary 2
      </button>
    </div>
    <div class="swan-collapsible-content" id="content-2">Content 2.</div>
  </div>
</div>

Managing state

Controlling the state of an Accordion is only necessary if there's a need to read or write its state from another component. This requirement is rather uncommon.

In the React API, use expandedCollapsibles on the Accordion to map the collapsibleIds to a boolean, indicating whether each Collapsible should be expanded or not.

If provided, expandedCollapsibles is treated as the source of truth, and overrides the single prop.

Use the onRequestExpandedChange prop on the Accordion to be notified when a Collapsible wants to expand or collapse. This handler is invoked with two arguments:

collapsibleId: to identify the Collapsible changing its state.
expanded: to indicate whether the Collapsible seeks to be expanded or not.

() => {
  const [expandedCollapsibles, setExpandedCollapsibles] = React.useState({
    'coll-one': false,
    'coll-two': true,
  })
  return (
    <Accordion
      expandedCollapsibles={expandedCollapsibles}
      onRequestExpandedChange={(collapsibleId, expanded) => {
        setExpandedCollapsibles(prevValue => ({
          ...prevValue,
          [collapsibleId]: expanded,
        }))
        // or if you want to emulate "single" behavior
        // setExpandedCollapsibles({ [collapsibleId]: expanded })
      }}
    >
      <BasicCollapsible collapsibleId="coll-one" heading="Summary 1">
        Content 1.
      </BasicCollapsible>
      <BasicCollapsible collapsibleId="coll-two" heading="Summary 2">
        Content 2.
      </BasicCollapsible>
    </Accordion>
  )
}

() => {
  const [expandedCollapsibles, setExpandedCollapsibles] = React.useState({
    'coll-one': false,
    'coll-two': true,
  })
  return (
    <Accordion
      expandedCollapsibles={expandedCollapsibles}
      onRequestExpandedChange={(collapsibleId, expanded) => {
        setExpandedCollapsibles(prevValue => ({
          ...prevValue,
          [collapsibleId]: expanded,
        }))
        // or if you want to emulate "single" behavior
        // setExpandedCollapsibles({ [collapsibleId]: expanded })
      }}
    >
      <BasicCollapsible collapsibleId="coll-one" heading="Summary 1">
        Content 1.
      </BasicCollapsible>
      <BasicCollapsible collapsibleId="coll-two" heading="Summary 2">
        Content 2.
      </BasicCollapsible>
    </Accordion>
  )
}

Accessibility

Refer to Collapsible usage.

Content

Refer to Collapsible guidelines.

SEO

Ensure accordion content is part of the page's source HTML for effective crawling by Googlebot.
Coordinate with the Organic Search team for Googlebot crawling validation if the content is dynamically added through JavaScript.
Avoid important content in collapsed accordions: search engines, including Googlebot, can't see information that requires user interaction to view. For lengthy accordions, make sure at least one accordion is expanded by default.

Props

Accordion

This component is implemented using the <div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.

See core props for additional props that can be applied to this component.

prop	type	required	description	default
skin	`string \| null`	false	The visual style of the Accordion. Available options: "standard", "color-swatches"	null
fullBleed	`boolean \| null`	false	Specifies if the Accordion should have full bleed	null
single	`boolean \| null`	false	Specifies if only a single collapsible can be expanded at a time or not	null
purpose	`"list" \| null`	false	The semantic purpose of the Accordion If you want to render a list you can set the purpose to 'list' and the Accordion will render an <ol> element	null
expandedCollapsibles	`{ [x: string]: boolean; } \| null`	false	The map of collapsible IDs and their expanded state.	null
onRequestExpandedChange	`((collapsibleId: string, expanded: boolean) => void) \| null`	false	The callback function for handling expanded change events.	null
defaultExpandedCollapsibles	`{ [x: string]: boolean; } \| null`	false	The default map of collapsible IDs and their expanded state. \n This is ignored if expandedCollapsibles is provided	null

Collapsible

Was this page useful?

accordioncollapsiblesqueeze-box

Published: Jan 3, 2022Last updated: Sep 3, 2024

Alert Box

Accordion

Use Accordion...

Don't use Accordion...

Multiple

Single

Accordions as List

Full bleed

Color Swatches

Default expanded collapsibles

Managing state

Accessibility

Content

SEO

Props

Related