Accordion

Overview

Accordions toggle the visibility of sections of content. They feature panels that consist of a section text label and a caret icon that collapses or expands to reveal more information.

Disclosure variation

Accordions need to have at least two section panels. If only one panel is needed, a Disclosure is presented instead. Accordions are used to organize more important information whereas a disclosure is used to store supplementary content that might not be a crucial part of the user experience.

Installation

npm install @patternfly/pfe-accordion

Usage

<pfe-accordion>
  <pfe-accordion-header>
    <h3>Laboris sunt qui dolor consectetur excepteur in aliqua ipsum?</h3>
  </pfe-accordion-header>
  <pfe-accordion-panel>
    <p>Culpa adipisicing sunt dolor ullamco dolor duis in ad commodo.</p>
    <pfe-cta>
      <a href="#">Call to action</a>
    </pfe-cta>
  </pfe-accordion-panel>
  <pfe-accordion-header>
    <h3>Anim est tempor fugiat pariatur laborum deserunt ex mollit aliquip?</h3>
  </pfe-accordion-header>
  <pfe-accordion-panel>
    <p><a href="#">Ullamco ullamco sint</a> ex id magna elit deserunt dolore nostrud eu et dolore est Lorem. Esse laborum do ut consectetur occaecat proident et nostrud ut nostrud veniam officia Lorem.</p>
  </pfe-accordion-panel>
  <pfe-accordion-header>
    <h3>Nostrud ad sit commodo nostrud?</h3>
  </pfe-accordion-header>
  <pfe-accordion-panel>
    <p>Nisi veniam tempor reprehenderit laboris amet laborum et do ut. Veniam eiusmod aliquip ullamco quis esse laborum Lorem exercitation consequat.</p>
  </pfe-accordion-panel>
  <pfe-accordion-header>
    <h3>Reprehenderit cupidatat labore?</h3>
  </pfe-accordion-header>
  <pfe-accordion-panel>
    <p>Magna incididunt aliquip consectetur dolor adipisicing amet cillum officia nostrud. Elit exercitation voluptate aute nostrud.</p>
    <pfe-cta>
      <a href="#">Call to action</a>
    </pfe-cta>
  </pfe-accordion-panel>
</pfe-accordion>

Slots

Default slot in pfe-accordion

Place the pfe-accordion-header and pfe-accordion-panel elements here.

Accents slot in pfe-accordion

These elements will appear inline with the accordion header, between the header and the chevron (or after the chevron and header in disclosure mode).

Default slot in pfe-accordion-header

We expect the light DOM of the pfe-accordion-header to be a heading level tag (h1, h2, h3, h4, h5, h6)

Default slot in pfe-accordion-panel

Add the content for your accordion panel here.

Attributes

color Changes the color of <pfe-accordion-header>

disclosure If pfe-accordion has one pfe-accordion-header, it will get tagged with disclosure="true". This applies a slightly different set of styles: chevron appears on the left side, the header has a single border on all four sides. Applying disclosure="false" to a pfe-accordion element containing only one header/panel pairing will set the element to display as a standard accordion.

history Updates window.history and the URL to create sharable links. With the history attribute, the accordion must have an id.

The URL pattern will be ?{id-of-tabs}={index-of-expanded-items}. In the example below, selecting "Accordion 2" will update the URL as follows: ?lorem-ipsum=2. The index value for the expanded items starts at 1.

<pfe-accordion history id="lorem-ipsum">
  <pfe-accordion-header>
    <h3>Accordion 1</h3>
  </pfe-accordion-header>
  <pfe-accordion-panel>
    <p>Accordion 1 panel content.</p>
  </pfe-accordion-panel>
  <pfe-accordion-header>
    <h3>Accordion 2</h3>
  </pfe-accordion-header>
  <pfe-accordion-panel>
    <p>Accordion 2 panel content.</p>
  </pfe-accordion-panel>
</pfe-accordion>

To expand multiple sets, you can dash separate indexes: ?lorem-ipsum=1-2.

Note: This feature is not supported in IE11.

expanded-index Sets and reflects the currently expanded accordion indexes. Use commas to separate multiple indexes. The index value for the expanded items starts at 1.

<pfe-accordion expanded-index="2,3">
  ...
</pfe-accordion>

context Changes the context of the accordion to one of 3 possible themes:

• light (default)
• dark
• saturated

This will override any context being passed from a parent component and will add a style attribute setting the --theme variable.

Methods

toggle(index)

Accepts a 0-based index value (integer) for the set of accordion items to expand or collapse.

expand(index)

Accepts a 0-based index value (integer) for the set of accordion items to expand.

expandAll()

Expands all accordion items.

collapse(index)

Accepts a 0-based index value (integer) for the set of accordion items to collapse.

collapseAll()

Collapse all accordion items.

Events

pfe-accordion:change

Fires when an pfe-accordion-header is activated. The detail object contains the following

detail: {
  expanded: Boolean
}

Styling hooks