Accordion

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

styleKey: accordion

scriptKey: 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"
    headingLevel="h2"
  >
    Content 1.
  </BasicCollapsible>
  <BasicCollapsible
    collapsibleId="coll-two"
    heading="Summary 2"
    headingLevel="h2"
  >
    Content 2.
  </BasicCollapsible>
</Accordion>

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

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

<div class="swan-accordion">
  <div heading="Summary 1" class="swan-collapsible">
    <div class="swan-collapsible-summary">
      <h2>
        <button
          aria-expanded="false"
          class="swan-collapsible-summary-button"
          aria-controls="auto-id-lohl2c1q9-145"
        >
          Summary 1
        </button>
      </h2>
    </div>
    <div class="swan-collapsible-content" id="auto-id-lohl2c1q9-145">
      Content 1.
    </div>
  </div>
  <div heading="Summary 2" aria-disabled="false" class="swan-collapsible">
    <div class="swan-collapsible-summary">
      <h2>
        <button
          aria-expanded="false"
          class="swan-collapsible-summary-button"
          aria-controls="auto-id-lohl2c1q9-146"
        >
          Summary 2
        </button>
      </h2>
    </div>
    <div class="swan-collapsible-content" id="auto-id-lohl2c1q9-146">
      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"
    headingLevel="h2"
  >
    Content 1.
  </BasicCollapsible>
  <BasicCollapsible
    collapsibleId="coll-two"
    heading="Summary 2"
    headingLevel="h2"
  >
    Content 2.
  </BasicCollapsible>
</Accordion>

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

<div class="swan-accordion">
  <div heading="Summary 1" class="swan-collapsible">
    <div class="swan-collapsible-summary">
      <h2>
        <button
          aria-expanded="false"
          class="swan-collapsible-summary-button"
          aria-controls="auto-id-lohl2c1q9-181"
        >
          Summary 1
        </button>
      </h2>
    </div>
    <div class="swan-collapsible-content" id="auto-id-lohl2c1q9-181">
      Content 1.
    </div>
  </div>
  <div heading="Summary 2" class="swan-collapsible">
    <div class="swan-collapsible-summary">
      <h2>
        <button
          aria-expanded="false"
          class="swan-collapsible-summary-button"
          aria-controls="auto-id-lohl2c1q9-182"
        >
          Summary 2
        </button>
      </h2>
    </div>
    <div class="swan-collapsible-content" id="auto-id-lohl2c1q9-182">
      Content 2.
    </div>
  </div>
</div>

<div class="swan-accordion">
  <div heading="Summary 1" class="swan-collapsible">
    <div class="swan-collapsible-summary">
      <h2>
        <button
          aria-expanded="false"
          class="swan-collapsible-summary-button"
          aria-controls="auto-id-lohl2c1q9-181"
        >
          Summary 1
        </button>
      </h2>
    </div>
    <div class="swan-collapsible-content" id="auto-id-lohl2c1q9-181">
      Content 1.
    </div>
  </div>
  <div heading="Summary 2" class="swan-collapsible">
    <div class="swan-collapsible-summary">
      <h2>
        <button
          aria-expanded="false"
          class="swan-collapsible-summary-button"
          aria-controls="auto-id-lohl2c1q9-182"
        >
          Summary 2
        </button>
      </h2>
    </div>
    <div class="swan-collapsible-content" id="auto-id-lohl2c1q9-182">
      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. By default, it will render as a ol. To use an unordered list, use the as prop.
In the Vanilla API, use a ol tag for the Accordion, and li tags for each Collapsible within it.

ReactVanilla

<Accordion purpose="list" as="ul">
  <BasicCollapsible
    collapsibleId="coll-one"
    heading="Summary 1"
    headingLevel="h2"
  >
    Content 1.
  </BasicCollapsible>
  <BasicCollapsible
    collapsibleId="coll-two"
    heading="Summary 2"
    headingLevel="h2"
  >
    Content 2.
  </BasicCollapsible>
</Accordion>

<Accordion purpose="list" as="ul">
  <BasicCollapsible
    collapsibleId="coll-one"
    heading="Summary 1"
    headingLevel="h2"
  >
    Content 1.
  </BasicCollapsible>
  <BasicCollapsible
    collapsibleId="coll-two"
    heading="Summary 2"
    headingLevel="h2"
  >
    Content 2.
  </BasicCollapsible>
</Accordion>

<ul class="swan-accordion">
  <li heading="Summary 1" class="swan-collapsible">
    <div class="swan-collapsible-summary">
      <h2>
        <button
          aria-expanded="false"
          class="swan-collapsible-summary-button"
          aria-controls="auto-id-lohl2c1q9-209"
        >
          Summary 1
        </button>
      </h2>
    </div>
    <div class="swan-collapsible-content" id="auto-id-lohl2c1q9-209">
      Content 1.
    </div>
  </li>
  <li heading="Summary 2" class="swan-collapsible">
    <div class="swan-collapsible-summary">
      <h2>
        <button
          aria-expanded="false"
          class="swan-collapsible-summary-button"
          aria-controls="auto-id-lohl2c1q9-210"
        >
          Summary 2
        </button>
      </h2>
    </div>
    <div class="swan-collapsible-content" id="auto-id-lohl2c1q9-210">
      Content 2.
    </div>
  </li>
</ul>

<ul class="swan-accordion">
  <li heading="Summary 1" class="swan-collapsible">
    <div class="swan-collapsible-summary">
      <h2>
        <button
          aria-expanded="false"
          class="swan-collapsible-summary-button"
          aria-controls="auto-id-lohl2c1q9-209"
        >
          Summary 1
        </button>
      </h2>
    </div>
    <div class="swan-collapsible-content" id="auto-id-lohl2c1q9-209">
      Content 1.
    </div>
  </li>
  <li heading="Summary 2" class="swan-collapsible">
    <div class="swan-collapsible-summary">
      <h2>
        <button
          aria-expanded="false"
          class="swan-collapsible-summary-button"
          aria-controls="auto-id-lohl2c1q9-210"
        >
          Summary 2
        </button>
      </h2>
    </div>
    <div class="swan-collapsible-content" id="auto-id-lohl2c1q9-210">
      Content 2.
    </div>
  </li>
</ul>

Full bleed

fullBleed is deprecated in SWAN v3.37.0

Accordion displays the content full bleed by default.

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"
    headingLevel="h2"
  >
    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"
    headingLevel="h2"
  >
    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"
    headingLevel="h2"
  >
    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"
    headingLevel="h2"
  >
    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 heading="Summary 1" class="swan-collapsible">
    <div class="swan-collapsible-summary">
      <h2>
        <button
          aria-expanded="false"
          class="swan-collapsible-summary-button"
          aria-controls="auto-id-lohl2c1q9-237"
        >
          Summary 1
        </button>
      </h2>
    </div>
    <div class="swan-collapsible-content" id="auto-id-lohl2c1q9-237">
      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 heading="Summary 2" class="swan-collapsible">
    <div class="swan-collapsible-summary">
      <h2>
        <button
          aria-expanded="false"
          class="swan-collapsible-summary-button"
          aria-controls="auto-id-lohl2c1q9-238"
        >
          Summary 2
        </button>
      </h2>
    </div>
    <div class="swan-collapsible-content" id="auto-id-lohl2c1q9-238">
      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 heading="Summary 1" class="swan-collapsible">
    <div class="swan-collapsible-summary">
      <h2>
        <button
          aria-expanded="false"
          class="swan-collapsible-summary-button"
          aria-controls="auto-id-lohl2c1q9-237"
        >
          Summary 1
        </button>
      </h2>
    </div>
    <div class="swan-collapsible-content" id="auto-id-lohl2c1q9-237">
      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 heading="Summary 2" class="swan-collapsible">
    <div class="swan-collapsible-summary">
      <h2>
        <button
          aria-expanded="false"
          class="swan-collapsible-summary-button"
          aria-controls="auto-id-lohl2c1q9-238"
        >
          Summary 2
        </button>
      </h2>
    </div>
    <div class="swan-collapsible-content" id="auto-id-lohl2c1q9-238">
      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>

Disabled

Use disabled when a Collapsible within the Accordion can not be interacted with, when the content of the Accordion is permanently unavailable, or irrelevant to the user’s current task.

ReactVanilla

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

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

<div class="swan-accordion">
  <div heading="Summary 1" class="swan-collapsible">
    <div class="swan-collapsible-summary">
      <h2>
        <button
          aria-expanded="false"
          class="swan-collapsible-summary-button"
          aria-controls="auto-id-lohl2c1q9-181"
        >
          Summary 1
        </button>
      </h2>
    </div>
    <div class="swan-collapsible-content" id="auto-id-lohl2c1q9-181">
      Content 1.
    </div>
  </div>
  <div heading="Summary 2" class="swan-collapsible">
    <div class="swan-collapsible-summary">
      <h2>
        <button
          aria-expanded="false"
          class="swan-collapsible-summary-button"
          aria-controls="auto-id-lohl2c1q9-182"
        >
          Summary 2
        </button>
      </h2>
    </div>
    <div class="swan-collapsible-content" id="auto-id-lohl2c1q9-182">
      Content 2.
    </div>
  </div>
</div>

<div class="swan-accordion">
  <div heading="Summary 1" class="swan-collapsible">
    <div class="swan-collapsible-summary">
      <h2>
        <button
          aria-expanded="false"
          class="swan-collapsible-summary-button"
          aria-controls="auto-id-lohl2c1q9-181"
        >
          Summary 1
        </button>
      </h2>
    </div>
    <div class="swan-collapsible-content" id="auto-id-lohl2c1q9-181">
      Content 1.
    </div>
  </div>
  <div heading="Summary 2" class="swan-collapsible">
    <div class="swan-collapsible-summary">
      <h2>
        <button
          aria-expanded="false"
          class="swan-collapsible-summary-button"
          aria-controls="auto-id-lohl2c1q9-182"
        >
          Summary 2
        </button>
      </h2>
    </div>
    <div class="swan-collapsible-content" id="auto-id-lohl2c1q9-182">
      Content 2.
    </div>
  </div>
</div>

Color Swatches

Use skin="color-swatches" to wrap a large amount of Color Swatches in a more compact manner.

The CollapsibleSummaryButton shows the total number of available swatches.

ReactVanilla

<GridContainer>
  <Row>
    <Column span={3}>
      <Accordion skin="color-swatches">
        <Collapsible collapsibleId="color-swatches-one" headingLevel={null}>
          <CollapsibleSummary>
            <CollapsibleSummaryButton>
              10
              <VisuallyHidden>color choices</VisuallyHidden>
            </CollapsibleSummaryButton>
          </CollapsibleSummary>
          <CollapsibleContent>
            <ColorSwatches>
              <ColorSwatch
                primaryColor="red"
                secondaryColor="black"
                accessibleText="red/black"
              />
              <ColorSwatch primaryColor="indigo" accessibleText="indigo" />
              <ColorSwatch primaryColor="green" accessibleText="green" />
              <ColorSwatch primaryColor="gold" accessibleText="gold" />
              <ColorSwatch primaryColor="blue" accessibleText="blue" />
              <ColorSwatch primaryColor="orange" accessibleText="orange" />
              <ColorSwatch primaryColor="pink" accessibleText="pink" />
              <ColorSwatch primaryColor="brown" accessibleText="brown" />
              <ColorSwatch
                primaryColor="limegreen"
                accessibleText="lime green"
              />
              <ColorSwatch
                primaryColor="darkmagenta"
                accessibleText="dark magenta"
              />
            </ColorSwatches>
          </CollapsibleContent>
        </Collapsible>
      </Accordion>
    </Column>
  </Row>
</GridContainer>

<GridContainer>
  <Row>
    <Column span={3}>
      <Accordion skin="color-swatches">
        <Collapsible collapsibleId="color-swatches-one" headingLevel={null}>
          <CollapsibleSummary>
            <CollapsibleSummaryButton>
              10
              <VisuallyHidden>color choices</VisuallyHidden>
            </CollapsibleSummaryButton>
          </CollapsibleSummary>
          <CollapsibleContent>
            <ColorSwatches>
              <ColorSwatch
                primaryColor="red"
                secondaryColor="black"
                accessibleText="red/black"
              />
              <ColorSwatch primaryColor="indigo" accessibleText="indigo" />
              <ColorSwatch primaryColor="green" accessibleText="green" />
              <ColorSwatch primaryColor="gold" accessibleText="gold" />
              <ColorSwatch primaryColor="blue" accessibleText="blue" />
              <ColorSwatch primaryColor="orange" accessibleText="orange" />
              <ColorSwatch primaryColor="pink" accessibleText="pink" />
              <ColorSwatch primaryColor="brown" accessibleText="brown" />
              <ColorSwatch
                primaryColor="limegreen"
                accessibleText="lime green"
              />
              <ColorSwatch
                primaryColor="darkmagenta"
                accessibleText="dark magenta"
              />
            </ColorSwatches>
          </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 class="swan-color-swatches">
                <div class="swan-color-swatch-wrapper">
                  <div
                    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
                  >
                </div>
                <div class="swan-color-swatch-wrapper">
                  <div
                    role="presentation"
                    class="swan-color-swatch"
                    style="background-color: indigo;"
                  ></div>
                  <span
                    class="swan-color-swatch-accessible-label swan-visually-hidden"
                    >color indigo</span
                  >
                </div>
                <div class="swan-color-swatch-wrapper">
                  <div
                    role="presentation"
                    class="swan-color-swatch"
                    style="background-color: green;"
                  ></div>
                  <span
                    class="swan-color-swatch-accessible-label swan-visually-hidden"
                    >color green</span
                  >
                </div>
                <div class="swan-color-swatch-wrapper">
                  <div
                    role="presentation"
                    class="swan-color-swatch"
                    style="background-color: gold;"
                  ></div>
                  <span
                    class="swan-color-swatch-accessible-label swan-visually-hidden"
                    >color gold</span
                  >
                </div>
                <div class="swan-color-swatch-wrapper">
                  <div
                    role="presentation"
                    class="swan-color-swatch"
                    style="background-color: blue;"
                  ></div>
                  <span
                    class="swan-color-swatch-accessible-label swan-visually-hidden"
                    >color blue</span
                  >
                </div>
                <div class="swan-color-swatch-wrapper">
                  <div
                    role="presentation"
                    class="swan-color-swatch"
                    style="background-color: orange;"
                  ></div>
                  <span
                    class="swan-color-swatch-accessible-label swan-visually-hidden"
                    >color orange</span
                  >
                </div>
                <div class="swan-color-swatch-wrapper">
                  <div
                    role="presentation"
                    class="swan-color-swatch"
                    style="background-color: pink;"
                  ></div>
                  <span
                    class="swan-color-swatch-accessible-label swan-visually-hidden"
                    >color pink</span
                  >
                </div>
                <div class="swan-color-swatch-wrapper">
                  <div
                    role="presentation"
                    class="swan-color-swatch"
                    style="background-color: brown;"
                  ></div>
                  <span
                    class="swan-color-swatch-accessible-label swan-visually-hidden"
                    >color brown</span
                  >
                </div>
                <div class="swan-color-swatch-wrapper">
                  <div
                    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
                  >
                </div>
                <div class="swan-color-swatch-wrapper">
                  <div
                    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
                  >
                </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 class="swan-color-swatches">
                <div class="swan-color-swatch-wrapper">
                  <div
                    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
                  >
                </div>
                <div class="swan-color-swatch-wrapper">
                  <div
                    role="presentation"
                    class="swan-color-swatch"
                    style="background-color: indigo;"
                  ></div>
                  <span
                    class="swan-color-swatch-accessible-label swan-visually-hidden"
                    >color indigo</span
                  >
                </div>
                <div class="swan-color-swatch-wrapper">
                  <div
                    role="presentation"
                    class="swan-color-swatch"
                    style="background-color: green;"
                  ></div>
                  <span
                    class="swan-color-swatch-accessible-label swan-visually-hidden"
                    >color green</span
                  >
                </div>
                <div class="swan-color-swatch-wrapper">
                  <div
                    role="presentation"
                    class="swan-color-swatch"
                    style="background-color: gold;"
                  ></div>
                  <span
                    class="swan-color-swatch-accessible-label swan-visually-hidden"
                    >color gold</span
                  >
                </div>
                <div class="swan-color-swatch-wrapper">
                  <div
                    role="presentation"
                    class="swan-color-swatch"
                    style="background-color: blue;"
                  ></div>
                  <span
                    class="swan-color-swatch-accessible-label swan-visually-hidden"
                    >color blue</span
                  >
                </div>
                <div class="swan-color-swatch-wrapper">
                  <div
                    role="presentation"
                    class="swan-color-swatch"
                    style="background-color: orange;"
                  ></div>
                  <span
                    class="swan-color-swatch-accessible-label swan-visually-hidden"
                    >color orange</span
                  >
                </div>
                <div class="swan-color-swatch-wrapper">
                  <div
                    role="presentation"
                    class="swan-color-swatch"
                    style="background-color: pink;"
                  ></div>
                  <span
                    class="swan-color-swatch-accessible-label swan-visually-hidden"
                    >color pink</span
                  >
                </div>
                <div class="swan-color-swatch-wrapper">
                  <div
                    role="presentation"
                    class="swan-color-swatch"
                    style="background-color: brown;"
                  ></div>
                  <span
                    class="swan-color-swatch-accessible-label swan-visually-hidden"
                    >color brown</span
                  >
                </div>
                <div class="swan-color-swatch-wrapper">
                  <div
                    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
                  >
                </div>
                <div class="swan-color-swatch-wrapper">
                  <div
                    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
                  >
                </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"
    headingLevel="h2"
  >
    Content 1.
  </BasicCollapsible>
  <BasicCollapsible
    collapsibleId="coll-two"
    heading="Summary 2"
    headingLevel="h2"
  >
    Content 2.
  </BasicCollapsible>
</Accordion>

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

<div class="swan-accordion">
  <div heading="Summary 1" class="swan-collapsible">
    <div class="swan-collapsible-summary">
      <h2>
        <button
          aria-expanded="false"
          class="swan-collapsible-summary-button"
          aria-controls="auto-id-lohl2c1q9-449"
        >
          Summary 1
        </button>
      </h2>
    </div>
    <div class="swan-collapsible-content" id="auto-id-lohl2c1q9-449">
      Content 1.
    </div>
  </div>
  <div heading="Summary 2" class="swan-collapsible">
    <div class="swan-collapsible-summary">
      <h2>
        <button
          aria-expanded="true"
          class="swan-collapsible-summary-button"
          aria-controls="auto-id-lohl2c1q9-450"
        >
          Summary 2
        </button>
      </h2>
    </div>
    <div
      class="swan-collapsible-content swan-collapsible-content-open"
      id="auto-id-lohl2c1q9-450"
    >
      Content 2.
    </div>
  </div>
</div>

<div class="swan-accordion">
  <div heading="Summary 1" class="swan-collapsible">
    <div class="swan-collapsible-summary">
      <h2>
        <button
          aria-expanded="false"
          class="swan-collapsible-summary-button"
          aria-controls="auto-id-lohl2c1q9-449"
        >
          Summary 1
        </button>
      </h2>
    </div>
    <div class="swan-collapsible-content" id="auto-id-lohl2c1q9-449">
      Content 1.
    </div>
  </div>
  <div heading="Summary 2" class="swan-collapsible">
    <div class="swan-collapsible-summary">
      <h2>
        <button
          aria-expanded="true"
          class="swan-collapsible-summary-button"
          aria-controls="auto-id-lohl2c1q9-450"
        >
          Summary 2
        </button>
      </h2>
    </div>
    <div
      class="swan-collapsible-content swan-collapsible-content-open"
      id="auto-id-lohl2c1q9-450"
    >
      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

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

prop	type	required	default	deprecation notes
`skin` The visual style of the Accordion.	`"standard""color-swatches"null`	false	standard
⚠️ Deprecated `fullBleed` Specifies if the Accordion should have full bleed @deprecated This prop is deprecated without a replacement as full bleed is now the default behaviour.	`booleannull`	false	false	This prop is deprecated without a replacement as full bleed is now the default behaviour.
`single` Specifies if only a single collapsible can be expanded at a time or not	`booleannull`	false	false
`purpose` 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	`AccordionPurpose`	false	null
`expandedCollapsibles` The map of collapsible IDs and their expanded state.	`ExpandedCollapsibleMapnull`	false	null
`onRequestExpandedChange` The callback function for handling expanded change events.	`((collapsibleId: string, expanded: boolean) => void)null`	false	null
`defaultExpandedCollapsibles` The default map of collapsible IDs and their expanded state. \n This is ignored if expandedCollapsibles is provided	`ExpandedCollapsibleMapnull`	false	null

Collapsible

Accordion

Use Accordion...

Don't use Accordion...

Multiple

Single

Accordions as List

Full bleed

Disabled

Color Swatches

Default expanded collapsibles

Managing state

Accessibility

Content

SEO

Props

Related