Accordion

<bolt-accordion-group header="Accordion group name">
    <bolt-accordion header="Accordion number one">
        <p>Accordion content goes here</p>
    </bolt-accordion>
    <bolt-accordion header="Accordion number two">
        <p>Accordion content goes here</p>
    </bolt-accordion>
    <bolt-accordion header="Accordion number three">
        <p>Accordion content goes here</p>
    </bolt-accordion>
</bolt-accordion-group>

<bolt-accordion-group header="Accordion group name" showtoggle>
    <bolt-accordion header="Accordion number one">
        <p>Accordion content goes here</p>
    </bolt-accordion>
    <bolt-accordion header="Accordion number two">
        <p>Accordion content goes here</p>
    </bolt-accordion>
    <bolt-accordion header="Accordion number three">
        <p>Accordion content goes here</p>
    </bolt-accordion>
</bolt-accordion-group>

When using the Bolt background color classes for containers, accordions will take on the appropriate foreground color by default.

<div class="bolt-background-vibrantBlue">
  <bolt-accordion-group header="Accordion group name">
      <bolt-accordion header="Accordion number one">
          <p>Accordion content goes here</p>
      </bolt-accordion>
      <bolt-accordion header="Accordion number two">
          <p>Accordion content goes here</p>
      </bolt-accordion>
      <bolt-accordion header="Accordion number three">
          <p>Accordion content goes here</p>
      </bolt-accordion>
  </bolt-accordion-group>
</div>

<bolt-accordion-group header="Accordion group name">
    <div slot="bodytext">Accordion group body text goes here</div>
    <bolt-accordion header="Accordion number one">
        <p>Accordion content goes here</p>
    </bolt-accordion>
    <bolt-accordion header="Accordion number two">
        <p>Accordion content goes here</p>
    </bolt-accordion>
    <bolt-accordion header="Accordion number three">
        <p>Accordion content goes here</p>
    </bolt-accordion>
</bolt-accordion-group>

<bolt-accordion-group header="Accordion group name" showtoggle>
    <div slot="bodytext">Accordion group body text goes here</div>
    <bolt-accordion header="Accordion number one">
        <p>Accordion content goes here</p>
    </bolt-accordion>
    <bolt-accordion header="Accordion number two">
        <p>Accordion content goes here</p>
    </bolt-accordion>
    <bolt-accordion header="Accordion number three">
        <p>Accordion content goes here</p>
    </bolt-accordion>
</bolt-accordion-group>

Accordions consist of the bolt-accordion-group and bolt-accordion components. Both must be used together.

The bolt-accordion-group groups together a set of accordions.

• header (required): A label for the group of accordions displayed above the first accordion.
• showtoggle (optional): If present, displays the "Open all" / "Close all" toggle control beside the header.

• bodytext (optional): If present, displays supporting body text below the heading.

• close(index): closes a <bolt-accordion> at the given index
• closeAll(): closes all <bolt-accordion> children
  • called internally when clicking "Close all"
• open(index): opens a <bolt-accordion> at the given index
• openAll(): opens all <bolt-accordion> children
  • called internally when clicking "Open all"

• bolt-accordion-group-close-all: fires after closeAll()
• bolt-accordion-group-open-all: first after openAll()

The bolt-accordion holds the content for an accordion.

• header: required. The label for the accordion.
• active: optional. If present, the accordion content is expanded. This parameter can also be set via Javascript as a boolean.

• open(): opens the accordion
• close(): closes the accordion
• toggle(): opens accordion, if closed, and vice versa

• bolt-accordion-close
  • fires after close() or when toggle() closes the accordion
  • bubbles up to the nearest <bolt-accordion-group>
• bolt-accordion-open
  • fires after open() or when toggle() opens the accordion
  • bubbles up to the nearest <bolt-accordion-group>

• An Accordion's header should only be used to label an Accordion's contents and allow users to expand and collapse the Accordion.
• Information included in an Accordion panel should be concise and to the point, so users can quickly scan and understand the content without feeling overwhelmed.
• Opening and closing an Accordion should not automatically close or open other Accordions, this prevents an Accordion that is opened scrolling out of view on a small display.
• Consider opening the first of an Accordion group by default to help users recognize that these screen elements can be expanded and collapsed.
• It is acceptable to have a single Accordion on a page.
• Use body text below the header when a short sentence or two under the group title helps people understand what the Accordion group is about or what they should do in the Accordion.

• If it would be beneficial for users to only view a few specific pieces of compartmentalized content on a screen.
• If there is limited screen real estate for content and other screen elements.

• Avoid using Accordion if content or other screen elements can be displayed without excessive scrolling.
• Avoid using if a large amount of content is better consumed or tasks are easier to complete on a separate page.
• Avoid using if there are more than 10 modules of content.
• Avoid using if it is a priority to have your users see all content at once.
• Avoid placing content or screen elements inside an Accordion if users expect to have direct access to it. (e.g. Buttons to complete a task, etc.)

• If content is crucial to read in full or if a layout conveys a clear sense of information hierarchy; use static content instead and let the user scroll.
• If content is sparse, consider lists or Tabset instead.
• If linking text to another page, consider a Link instead.
• Consider alternative patterns for displaying a small subset of related information in-between other elements.

• Accordion header labels should use sentence case. For example, "How to insure your car."
• Accordion header labels should clearly describe the contents of the Accordion.
• Avoid overloading each Accordion panel with too much content. Keep the information concise and to the point, so users can quickly scan and understand the content without feeling overwhelmed.

When using the accordion on background colors, assure there is proper contrast.

• Accordion background to container background must meet a 3:1 contrast.
• OR, the accordion border to container background must meet a 3:1 contrast.
• If neither are met, then another background color should be chosen.

All Bolt components have gone through accessibility testing, but please keep our accessibility guidelines in mind.