CenturyLink Logo
CenturyLink
Lumen Logo
Lumen
Lumen Enterprise Portal Logo
Lumen Enterprise Portal

Expansion panel

Expansion panels organize content into collapsible panels and reveal them to users in a progressive, step-by-step way.

Examples

Base

Group expansion panels using the attribute data-chi-epanel-group="name-of-the-group". This will enable panels to work together as a sequential form. When a panel is activated, the previous expanding panels will get the done state and the next will get the pending state.

1.
Panel title
Use this area to present
a read-only summary of what the user
entered or selected in step 1.
(e.g.) a package selection
Optional subtitle

Content in expansion panel (e.g. a form to select a product package)

2.
Panel title
Use this area to present
a read-only summary of what the user
entered or selected in step 2.
(e.g.) shipping address
Optional subtitle

Content in expansion panel (e.g. a form to enter shipping address)

3.
Panel title
Use this area to present
a read-only summary of what the user
entered or selected in step 3.
(e.g.) installation date
Optional subtitle

Content in expansion panel (e.g. a form to select installation date)

4.
Panel title
Use this area to present
a read-only summary of what the user
entered or selected in step 4.
(e.g.) payment method
Optional subtitle

Content in expansion panel (e.g. a form to enter payment method)

<chi-expansion-panel step="1" title="Panel title" state="active">
  <div slot="active">
    <div class="chi-epanel__subtitle">
      Optional subtitle
    </div>
    <p class="chi-epanel__text">
      Content in expansion panel (e.g. a form to select a product package)
    </p>
  </div>
  <div slot="footer">
    <chi-button color="primary">
      Continue
    </chi-button>
  </div>
</chi-expansion-panel>
<chi-expansion-panel step="2" title="Panel title"></chi-expansion-panel>
<chi-expansion-panel step="3" title="Panel title"></chi-expansion-panel>
<chi-expansion-panel step="4" title="Panel title"></chi-expansion-panel>
This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<!-- JavaScript -->
<script>chi.expansionPanel(document.querySelectorAll('[data-chi-epanel-group="example3"]'));</script>

<!-- HTML -->
<div class="chi-epanel -active" data-chi-epanel-group="example3">
  <div class="chi-epanel__header">
    <div class="chi-epanel__number">1.</div>
    <div class="chi-epanel__title">Panel title</div>
    <div class="chi-epanel__content">
      <div class="chi-epanel__collapse">
        <div class="-done--only">
          Use this area to present<br />
          a read-only summary of what the user<br />
          entered or selected in step 1.<br />
          (e.g.) a package selection
        </div>
      </div>
    </div>
    <div class="chi-epanel__action -done--only">
      <button class="chi-button -primary -flat" data-chi-epanel-action="active">Change</button>
    </div>
  </div>
  <div class="chi-epanel__collapse">
    <div class="-active--only">
      <div class="chi-epanel__body">
        <div class="chi-epanel__content">
          <div class="chi-epanel__subtitle">Optional subtitle</div>
          <p class="chi-epanel__text">Content in expansion panel (e.g. a form to select a product package)</p>
        </div>
        <div class="chi-epanel__footer -justify-content--end">
          <button class="chi-button -primary" data-chi-epanel-action="next">Continue</button>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="chi-epanel" data-chi-epanel-group="example3">
  <div class="chi-epanel__header">
    <div class="chi-epanel__number">2.</div>
    <div class="chi-epanel__title">Panel title</div>
    <div class="chi-epanel__content">
      <div class="chi-epanel__collapse">
        <div class="-done--only">
          Use this area to present<br />
          a read-only summary of what the user<br />
          entered or selected in step 2.<br />
          (e.g.) shipping address
        </div>
      </div>
    </div>
    <div class="chi-epanel__action -done--only">
      <button class="chi-button -primary -flat" data-chi-epanel-action="active">Change</button>
    </div>
  </div>
  <div class="chi-epanel__collapse">
    <div class="-active--only">
      <div class="chi-epanel__body">
        <div class="chi-epanel__content">
          <div class="chi-epanel__subtitle">Optional subtitle</div>
          <p class="chi-epanel__text">Content in expansion panel (e.g. a form to enter shipping address)</p>
        </div>
        <div class="chi-epanel__footer -justify-content--end">
          <button class="chi-button" data-chi-epanel-action="previous">Previous</button>
          <button class="chi-button -primary" data-chi-epanel-action="next">Continue</button>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="chi-epanel" data-chi-epanel-group="example3">
  <div class="chi-epanel__header">
    <div class="chi-epanel__number">3.</div>
    <div class="chi-epanel__title">Panel title</div>
    <div class="chi-epanel__content">
      <div class="chi-epanel__collapse">
        <div class="-done--only">
          Use this area to present<br />
          a read-only summary of what the user<br />
          entered or selected in step 3.<br />
          (e.g.) installation date
        </div>
      </div>
    </div>
    <div class="chi-epanel__action -done--only">
      <button class="chi-button -primary -flat" data-chi-epanel-action="active">Change</button>
    </div>
  </div>
  <div class="chi-epanel__collapse">
    <div class="-active--only">
      <div class="chi-epanel__body">
        <div class="chi-epanel__content">
          <div class="chi-epanel__subtitle">Optional subtitle</div>
          <p class="chi-epanel__text">Content in expansion panel (e.g. a form to select installation date)</p>
        </div>
        <div class="chi-epanel__footer -justify-content--end">
          <button class="chi-button" data-chi-epanel-action="previous">Previous</button>
          <button class="chi-button -primary" data-chi-epanel-action="done">Continue</button>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="chi-epanel" data-chi-epanel-group="example3">
  <div class="chi-epanel__header">
    <div class="chi-epanel__number">4.</div>
    <div class="chi-epanel__title">Panel title</div>
    <div class="chi-epanel__content">
      <div class="chi-epanel__collapse">
        <div class="-done--only">
          Use this area to present<br />
          a read-only summary of what the user<br />
          entered or selected in step 4.<br />
          (e.g.) payment method
        </div>
      </div>
    </div>
    <div class="chi-epanel__action -done--only">
      <button class="chi-button -primary -flat" data-chi-epanel-action="active">Change</button>
    </div>
  </div>
  <div class="chi-epanel__collapse">
    <div class="-active--only">
      <div class="chi-epanel__body">
        <div class="chi-epanel__content">
          <div class="chi-epanel__subtitle">Optional subtitle</div>
          <p class="chi-epanel__text">Content in expansion panel (e.g. a form to enter payment method)</p>
        </div>
        <div class="chi-epanel__footer -justify-content--end">
          <button class="chi-button" data-chi-epanel-action="previous">Previous</button>
          <button class="chi-button -primary" data-chi-epanel-action="next">Finish</button>
        </div>
      </div>
    </div>
  </div>
</div>

States

Expansion panels have four states: active, pending, done and disabled. When pending (default state), only the title is shown. When active, panels expand to show content or forms. When done, content or form data is presented in a read only state. When disabled, a muted title is shown in a non-clickable state.

The four examples below differ only by state. Thanks to the state support and two internal hiding utility classes we can represent the different states of the same content changing only the property.

An optional cancel button can also be included to exit the expansion panel workflow.

1.
Done state
Use this area to present
a read-only summary of what the user
entered or selected in step 1.
(e.g.) a package selection
Optional subtitle

Content in expansion panel (e.g. a form to select a product package)

2.
Active state
Use this area to present
a read-only summary of what the user
entered or selected in step 2.
(e.g.) shipping address
Optional subtitle

Content in expansion panel (e.g. a form to enter shipping address)

3.
Pending state
Use this area to present
a read-only summary of what the user
entered or selected in step 3.
(e.g.) installation date
Optional subtitle

Content in expansion panel (e.g. a form to select installation date)

4.
Disabled state
Use this area to present
a read-only summary of what the user
entered or selected in step 4.
(e.g.) payment method
Optional subtitle

Content in expansion panel (e.g. a form to enter payment method)

<!-- Done state -->
<chi-expansion-panel step="1" title="Done panel" state="done">
  <div slot="done">
    Use this area to present<br />
    a read-only summary of what the user<br />
    entered or selected in step 1.<br />
    (e.g.) a package selection
  </div>
  <div slot="change">
    <chi-button color="primary" variant="flat">
      Change
    </chi-button>
  </div>
</chi-expansion-panel>

<!-- Active state -->
<chi-expansion-panel step="2" title="Active panel" state="active">
  <div slot="active">
    <div class="chi-epanel__subtitle">
      Optional subtitle
    </div>
    <p class="chi-epanel__text">
      Content in expansion panel (e.g. a form to enter shipping address)
    </p>
  </div>
  <div slot="footer">
    <chi-button color="primary" variant="flat">
      Cancel
    </chi-button>
    <chi-button color="primary" variant="outline">
      Previous
    </chi-button>
    <chi-button color="primary">
      Continue
    </chi-button>
  </div>
</chi-expansion-panel>

<!-- Pending state -->
<chi-expansion-panel step="3" title="Pending panel"></chi-expansion-panel>

<!-- Disabled state -->
<chi-expansion-panel step="4" title="Disabled panel" state="disabled"></chi-expansion-panel>
This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<!-- JavaScript -->
<script>chi.expansionPanel(document.querySelectorAll('[data-chi-epanel-group="example7"]'));</script>

<!-- HTML -->
<!-- Done state -->
<div class="chi-epanel -done" data-chi-epanel-group="example7">
  <div class="chi-epanel__header">
    <div class="chi-epanel__number">1.</div>
    <div class="chi-epanel__title">Done state</div>
    <div class="chi-epanel__content">
      <div class="chi-epanel__collapse">
        <div class="-done--only">
          Use this area to present<br />
          a read-only summary of what the user<br />
          entered or selected in step 1.<br />
          (e.g.) a package selection
        </div>
      </div>
    </div>
    <div class="chi-epanel__action -done--only">
      <button class="chi-button -primary -flat" data-chi-epanel-action="active">Change</button>
    </div>
  </div>
  <div class="chi-epanel__collapse">
    <div class="-active--only">
      <div class="chi-epanel__body">
        <div class="chi-epanel__content">
          <div class="chi-epanel__subtitle">Optional subtitle</div>
          <p class="chi-epanel__text">Content in expansion panel (e.g. a form to select a product package)</p>
        </div>
        <div class="chi-epanel__footer -justify-content--end">
          <button class="chi-button -primary" data-chi-epanel-action="next">Continue</button>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Active state -->
<div class="chi-epanel -active" data-chi-epanel-group="example7">
  <div class="chi-epanel__header">
    <div class="chi-epanel__number">2.</div>
    <div class="chi-epanel__title">Active state</div>
    <div class="chi-epanel__content">
      <div class="chi-epanel__collapse">
        <div class="-done--only">
          Use this area to present<br />
          a read-only summary of what the user<br />
          entered or selected in step 2.<br />
          (e.g.) shipping address
        </div>
      </div>
    </div>
    <div class="chi-epanel__action -done--only">
      <button class="chi-button -primary -flat" data-chi-epanel-action="active">Change</button>
    </div>
  </div>
  <div class="chi-epanel__collapse">
    <div class="-active--only">
      <div class="chi-epanel__body">
        <div class="chi-epanel__content">
          <div class="chi-epanel__subtitle">Optional subtitle</div>
          <p class="chi-epanel__text">Content in expansion panel (e.g. a form to enter shipping address)</p>
        </div>
        <div class="chi-epanel__footer -justify-content--end">
          <button class="chi-button -flat -primary">Cancel</button>
          <button class="chi-button" data-chi-epanel-action="previous">Previous</button>
          <button class="chi-button -primary" data-chi-epanel-action="next">Continue</button>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Pending state -->
<div class="chi-epanel -pending" data-chi-epanel-group="example7">
  <div class="chi-epanel__header">
    <div class="chi-epanel__number">3.</div>
    <div class="chi-epanel__title">Pending state</div>
    <div class="chi-epanel__content">
      <div class="chi-epanel__collapse">
        <div class="-done--only">
          Use this area to present<br />
          a read-only summary of what the user<br />
          entered or selected in step 3.<br />
          (e.g.) installation date
        </div>
      </div>
    </div>
    <div class="chi-epanel__action -done--only">
      <button class="chi-button -primary -flat" data-chi-epanel-action="active">Change</button>
    </div>
  </div>
  <div class="chi-epanel__collapse">
    <div class="-active--only">
      <div class="chi-epanel__body">
        <div class="chi-epanel__content">
          <div class="chi-epanel__subtitle">Optional subtitle</div>
          <p class="chi-epanel__text">Content in expansion panel (e.g. a form to select installation date)</p>
        </div>
        <div class="chi-epanel__footer -justify-content--end">
          <button class="chi-button" data-chi-epanel-action="previous">Previous</button>
          <button class="chi-button -primary" data-chi-epanel-action="done">Continue</button>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Disabled state -->
<div class="chi-epanel -disabled" data-chi-epanel-group="example7">
  <div class="chi-epanel__header">
    <div class="chi-epanel__number">4.</div>
    <div class="chi-epanel__title">Done state</div>
    <div class="chi-epanel__content">
      <div class="chi-epanel__collapse">
        <div class="-done--only">
          Use this area to present<br />
          a read-only summary of what the user<br />
          entered or selected in step 4.<br />
          (e.g.) payment method
        </div>
      </div>
    </div>
    <div class="chi-epanel__action -done--only">
      <button class="chi-button -primary -flat" data-chi-epanel-action="active">Change</button>
    </div>
  </div>
  <div class="chi-epanel__collapse">
    <div class="-active--only">
      <div class="chi-epanel__body">
        <div class="chi-epanel__content">
          <div class="chi-epanel__subtitle">Optional subtitle</div>
          <p class="chi-epanel__text">Content in expansion panel (e.g. a form to enter payment method)</p>
        </div>
        <div class="chi-epanel__footer -justify-content--end">
          <button class="chi-button" data-chi-epanel-action="previous">Previous</button>
          <button class="chi-button -primary" data-chi-epanel-action="next">Finish</button>
        </div>
      </div>
    </div>
  </div>
</div>

No step number

Step numbering is optional and can be easily omitted.

Panel title
Use this area to present
a read-only summary of what the user
entered or selected in step 1.
(e.g.) a package selection
Optional subtitle

Content in expansion panel (e.g. a form to select a product package)

Panel title
Use this area to present
a read-only summary of what the user
entered or selected in step 2.
(e.g.) shipping address
Optional subtitle

Content in expansion panel (e.g. a form to enter shipping address)

Panel title
Use this area to present
a read-only summary of what the user
entered or selected in step 3.
(e.g.) installation date
Optional subtitle

Content in expansion panel (e.g. a form to select installation date)

Panel title
Use this area to present
a read-only summary of what the user
entered or selected in step 4.
(e.g.) payment method
Optional subtitle

Content in expansion panel (e.g. a form to enter payment method)

Step numbering can be omitted by removing the step property.
<chi-expansion-panel title="Panel title" state="active">
  <div slot="active">
    <div class="chi-epanel__subtitle">
      Optional subtitle
    </div>
    <p class="chi-epanel__text">
      Content in expansion panel (e.g. a form to select a product package)
    </p>
  </div>
  <div slot="footer">
    <chi-button color="primary">
      Continue
    </chi-button>
  </div>
</chi-expansion-panel>
<chi-expansion-panel title="Panel title"></chi-expansion-panel>
<chi-expansion-panel title="Panel title"></chi-expansion-panel>
<chi-expansion-panel title="Panel title"></chi-expansion-panel>
This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.

Step numbering can be omitted by applying -no-step to chi-epanel and removing chi-epanel__number.
<!-- JavaScript -->
<script>chi.expansionPanel(document.querySelectorAll('[data-chi-epanel-group="example8"]'));</script>

<!-- HTML -->
<div class="chi-epanel -no-step -active" data-chi-epanel-group="example8">
  <div class="chi-epanel__header">
    <div class="chi-epanel__title">Panel title</div>
    <div class="chi-epanel__content">
      <div class="chi-epanel__collapse -ml--0">
        <div class="-done--only">
          Use this area to present<br />
          a read-only summary of what the user<br />
          entered or selected in step 1.<br />
          (e.g.) a package selection
        </div>
      </div>
    </div>
    <div class="chi-epanel__action -done--only">
      <button class="chi-button -primary -flat" data-chi-epanel-action="active">Change</button>
    </div>
  </div>
  <div class="chi-epanel__collapse">
    <div class="-active--only">
      <div class="chi-epanel__body">
        <div class="chi-epanel__content">
          <div class="chi-epanel__subtitle">Optional subtitle</div>
          <p class="chi-epanel__text">Content in expansion panel (e.g. a form to select a product package)</p>
        </div>
        <div class="chi-epanel__footer -justify-content--end">
          <button class="chi-button -primary" data-chi-epanel-action="next">Continue</button>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="chi-epanel -no-step" data-chi-epanel-group="example8">
  <div class="chi-epanel__header">
    <div class="chi-epanel__title">Panel title</div>
    <div class="chi-epanel__content">
      <div class="chi-epanel__collapse -ml--0">
        <div class="-done--only">
          Use this area to present<br />
          a read-only summary of what the user<br />
          entered or selected in step 2.<br />
          (e.g.) shipping address
        </div>
      </div>
    </div>
    <div class="chi-epanel__action -done--only">
      <button class="chi-button -primary -flat" data-chi-epanel-action="active">Change</button>
    </div>
  </div>
  <div class="chi-epanel__collapse">
    <div class="-active--only">
      <div class="chi-epanel__body">
        <div class="chi-epanel__content">
          <div class="chi-epanel__subtitle">Optional subtitle</div>
          <p class="chi-epanel__text">Content in expansion panel (e.g. a form to enter shipping address)</p>
        </div>
        <div class="chi-epanel__footer -justify-content--end">
          <button class="chi-button" data-chi-epanel-action="previous">Previous</button>
          <button class="chi-button -primary" data-chi-epanel-action="next">Continue</button>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="chi-epanel -no-step" data-chi-epanel-group="example8">
  <div class="chi-epanel__header">
    <div class="chi-epanel__title">Panel title</div>
    <div class="chi-epanel__content">
      <div class="chi-epanel__collapse -ml--0">
        <div class="-done--only">
          Use this area to present<br />
          a read-only summary of what the user<br />
          entered or selected in step 3.<br />
          (e.g.) installation date
        </div>
      </div>
    </div>
    <div class="chi-epanel__action -done--only">
      <button class="chi-button -primary -flat" data-chi-epanel-action="active">Change</button>
    </div>
  </div>
  <div class="chi-epanel__collapse">
    <div class="-active--only">
      <div class="chi-epanel__body">
        <div class="chi-epanel__content">
          <div class="chi-epanel__subtitle">Optional subtitle</div>
          <p class="chi-epanel__text">Content in expansion panel (e.g. a form to select installation date)</p>
        </div>
        <div class="chi-epanel__footer -justify-content--end">
          <button class="chi-button" data-chi-epanel-action="previous">Previous</button>
          <button class="chi-button -primary" data-chi-epanel-action="done">Continue</button>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="chi-epanel -no-step" data-chi-epanel-group="example8">
  <div class="chi-epanel__header">
    <div class="chi-epanel__title">Panel title</div>
    <div class="chi-epanel__content">
      <div class="chi-epanel__collapse -ml--0">
        <div class="-done--only">
          Use this area to present<br />
          a read-only summary of what the user<br />
          entered or selected in step 4.<br />
          (e.g.) payment method
        </div>
      </div>
    </div>
    <div class="chi-epanel__action -done--only">
      <button class="chi-button -primary -flat" data-chi-epanel-action="active">Change</button>
    </div>
  </div>
  <div class="chi-epanel__collapse">
    <div class="-active--only">
      <div class="chi-epanel__body">
        <div class="chi-epanel__content">
          <div class="chi-epanel__subtitle">Optional subtitle</div>
          <p class="chi-epanel__text">Content in expansion panel (e.g. a form to enter payment method)</p>
        </div>
        <div class="chi-epanel__footer -justify-content--end">
          <button class="chi-button" data-chi-epanel-action="previous">Previous</button>
          <button class="chi-button -primary" data-chi-epanel-action="next">Finish</button>
        </div>
      </div>
    </div>
  </div>
</div>

Bordered

Use bordered to apply borders to panels and contain them in card styled boxes.

Panel title
Use this area to present
a read-only summary of what the user
entered or selected in step 1.
Optional subtitle

Content goes here

Panel title
Use this area to present
a read-only summary of what the user
entered or selected in step 2.
Optional subtitle

Content goes here

Panel title
Use this area to present
a read-only summary of what the user
entered or selected in step 3.
Optional subtitle

Content goes here

Panel title
Use this area to present
a read-only summary of what the user
entered or selected in step 4.
Optional subtitle

Content goes here

To render bordered panels, apply the property bordered.
<!-- Done state -->
<chi-expansion-panel title="Done panel" bordered state="done">
  <div slot="done">
    Use this area to present<br />
    a read-only summary of what the user<br />
    entered or selected in step 1.
  </div>
  <div slot="change">
    <chi-button color="primary" variant="flat">
      Change
    </chi-button>
  </div>
</chi-expansion-panel>

<!-- Active state -->
<chi-expansion-panel title="Active panel" bordered state="active">
  <div slot="active">
    <div class="chi-epanel__subtitle">
      Optional subtitle
    </div>
    <p class="chi-epanel__text">
      Content goes here
    </p>
  </div>
  <div slot="footer">
    <chi-button color="primary">
      Continue
    </chi-button>
  </div>
</chi-expansion-panel>

<!-- Pending state -->
<chi-expansion-panel title="Pending panel" bordered></chi-expansion-panel>

<!-- Disabled state -->
<chi-expansion-panel title="Disabled panel" bordered state="disabled"></chi-expansion-panel>
This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.

To render bordered panels, apply the class -bordered.
<!-- JavaScript -->
<script>chi.expansionPanel(document.querySelectorAll('[data-chi-epanel-group="example9"]'));</script>

<!-- HTML -->
<!-- Done state -->
<div class="chi-epanel -bordered -done" data-chi-epanel-group="example9">
  <div class="chi-epanel__header">
    <div class="chi-epanel__number">1.</div>
    <div class="chi-epanel__title">Done state</div>
    <div class="chi-epanel__content">
      <div class="chi-epanel__collapse">
        <div class="-done--only">
          Use this area to present<br />
          a read-only summary of what the user<br />
          entered or selected in step 1.
        </div>
      </div>
    </div>
    <div class="chi-epanel__action -done--only">
      <button class="chi-button -primary -flat" data-chi-epanel-action="active">Change</button>
    </div>
  </div>
  <div class="chi-epanel__collapse">
    <div class="-active--only">
      <div class="chi-epanel__body">
        <div class="chi-epanel__content">
          <div class="chi-epanel__subtitle">Optional subtitle</div>
          <p class="chi-epanel__text">Content goes here</p>
        </div>
        <div class="chi-epanel__footer -justify-content--end">
          <button class="chi-button -primary" data-chi-epanel-action="next">Continue</button>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Active state -->
<div class="chi-epanel -bordered -active" data-chi-epanel-group="example9">
  <div class="chi-epanel__header">
    <div class="chi-epanel__number">2.</div>
    <div class="chi-epanel__title">Active state</div>
    <div class="chi-epanel__content">
      <div class="chi-epanel__collapse">
        <div class="-done--only">
          Use this area to present<br />
          a read-only summary of what the user<br />
          entered or selected in step 2.
        </div>
      </div>
    </div>
    <div class="chi-epanel__action -done--only">
      <button class="chi-button -primary -flat" data-chi-epanel-action="active">Change</button>
    </div>
  </div>
  <div class="chi-epanel__collapse">
    <div class="-active--only">
      <div class="chi-epanel__body">
        <div class="chi-epanel__content">
          <div class="chi-epanel__subtitle">Optional subtitle</div>
          <p class="chi-epanel__text">Content goes here</p>
        </div>
        <div class="chi-epanel__footer -justify-content--end">
          <button class="chi-button" data-chi-epanel-action="previous">Previous</button>
          <button class="chi-button -primary" data-chi-epanel-action="next">Continue</button>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Pending state -->
<div class="chi-epanel -bordered -pending" data-chi-epanel-group="example9">
  <div class="chi-epanel__header">
    <div class="chi-epanel__number">3.</div>
    <div class="chi-epanel__title">Pending state</div>
    <div class="chi-epanel__content">
      <div class="chi-epanel__collapse">
        <div class="-done--only">
          Use this area to present<br />
          a read-only summary of what the user<br />
          entered or selected in step 3.
        </div>
      </div>
    </div>
    <div class="chi-epanel__action -done--only">
      <button class="chi-button -primary -flat" data-chi-epanel-action="active">Change</button>
    </div>
  </div>
  <div class="chi-epanel__collapse">
    <div class="-active--only">
      <div class="chi-epanel__body">
        <div class="chi-epanel__content">
          <div class="chi-epanel__subtitle">Optional subtitle</div>
          <p class="chi-epanel__text">Content goes here</p>
        </div>
        <div class="chi-epanel__footer -justify-content--end">
          <button class="chi-button" data-chi-epanel-action="previous">Previous</button>
          <button class="chi-button -primary" data-chi-epanel-action="done">Continue</button>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Disabled state -->
<div class="chi-epanel -bordered -disabled" data-chi-epanel-group="example9">
  <div class="chi-epanel__header">
    <div class="chi-epanel__number">4.</div>
    <div class="chi-epanel__title">Done state</div>
    <div class="chi-epanel__content">
      <div class="chi-epanel__collapse">
        <div class="-done--only">
          Use this area to present<br />
          a read-only summary of what the user<br />
          entered or selected in step 4.
        </div>
      </div>
    </div>
    <div class="chi-epanel__action -done--only">
      <button class="chi-button -primary -flat" data-chi-epanel-action="active">Change</button>
    </div>
  </div>
  <div class="chi-epanel__collapse">
    <div class="-active--only">
      <div class="chi-epanel__body">
        <div class="chi-epanel__content">
          <div class="chi-epanel__subtitle">Optional subtitle</div>
          <p class="chi-epanel__text">Content goes here</p>
        </div>
        <div class="chi-epanel__footer -justify-content--end">
          <button class="chi-button" data-chi-epanel-action="previous">Previous</button>
          <button class="chi-button -primary" data-chi-epanel-action="next">Finish</button>
        </div>
      </div>
    </div>
  </div>
</div>

Accordion mode

The expansion panel component can be configured to work as an accordion in a way that when an element is activated, any other panel in the same group will be deactivated by putting it in the pending state. To activate this mode, add the mode: "accordion" configuration parameter at the moment of creation. Done states should not be used in this mode. In this example, titles have been configured to trigger the action toggle.

Panel 1

Content goes here

Panel 2

Content goes here

Panel 3

Content goes here

Panel 4

Content goes here

This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<div class="chi-epanel -bordered -active" data-chi-epanel-group="example4">
  <div class="chi-epanel__header">
    <div class="chi-epanel__title" data-chi-epanel-action="toggle">Panel 1</div>
  </div>
  <div class="chi-epanel__collapse">
    <div class="-active--only">
      <div class="chi-epanel__body">
        <div class="chi-epanel__content">
          <p class="chi-epanel__text">Content goes here</p>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="chi-epanel -bordered" data-chi-epanel-group="example4">
  <div class="chi-epanel__header">
    <div class="chi-epanel__title" data-chi-epanel-action="toggle">Panel 2</div>
  </div>
  <div class="chi-epanel__collapse">
    <div class="-active--only">
      <div class="chi-epanel__body">
        <div class="chi-epanel__content">
          <p class="chi-epanel__text">Content goes here</p>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="chi-epanel -bordered" data-chi-epanel-group="example4">
  <div class="chi-epanel__header">
    <div class="chi-epanel__title" data-chi-epanel-action="toggle">Panel 3</div>
  </div>
  <div class="chi-epanel__collapse">
    <div class="-active--only">
      <div class="chi-epanel__body">
        <div class="chi-epanel__content">
          <p class="chi-epanel__text">Content goes here</p>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="chi-epanel -bordered" data-chi-epanel-group="example4">
  <div class="chi-epanel__header">
    <div class="chi-epanel__title" data-chi-epanel-action="toggle">Panel 4</div>
  </div>
  <div class="chi-epanel__collapse">
    <div class="-active--only">
      <div class="chi-epanel__body">
        <div class="chi-epanel__content">
          <p class="chi-epanel__text">Content goes here</p>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- JavaScript -->
<script>
chi.expansionPanel(
  document.querySelectorAll('[data-chi-epanel-group="example4"]'),
  {mode: 'accordion'}
);
</script>

Free mode

In this mode there is no automated action triggered when an element activates, so you will need to manage all custom behavior.

Panel 1
Optional subtitle

Content goes here

Panel 2
Optional subtitle

Content goes here

Panel 3
Optional subtitle

Content goes here

Panel 4
Optional subtitle

Content goes here

This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<div class="chi-epanel -no-step -active" data-chi-epanel-group="example5">
  <div class="chi-epanel__header">
    <div class="chi-epanel__title" data-chi-epanel-action="toggle">Panel 1</div>
  </div>
  <div class="chi-epanel__collapse">
    <div class="-active--only">
      <div class="chi-epanel__body">
        <div class="chi-epanel__content">
          <div class="chi-epanel__subtitle">Optional subtitle</div>
          <p class="chi-epanel__text">Content goes here</p>
        </div>
        <div class="chi-epanel__footer -justify-content--end">
          <button class="chi-button -primary" data-chi-epanel-action="next">Continue</button>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="chi-epanel -no-step" data-chi-epanel-group="example5">
  <div class="chi-epanel__header">
    <div class="chi-epanel__title" data-chi-epanel-action="toggle">Panel 2</div>
  </div>
  <div class="chi-epanel__collapse">
    <div class="-active--only">
      <div class="chi-epanel__body">
        <div class="chi-epanel__content">
          <div class="chi-epanel__subtitle">Optional subtitle</div>
          <p class="chi-epanel__text">Content goes here</p>
        </div>
        <div class="chi-epanel__footer -justify-content--end">
          <button class="chi-button" data-chi-epanel-action="previous">Previous</button>
          <button class="chi-button -primary" data-chi-epanel-action="next">Continue</button>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- JavaScript -->
<script>
  chi.expansionPanel(
    document.querySelectorAll('[data-chi-epanel-group="example5"]'),
    {mode: 'free'}
  );
</script>

Custom mode

Write your own custom mode by adding a handler for state changes of the expansion panels in the configuration, and writing your own functions for the active, done, pending, disabled, toggle, next and previous actions. In the example, the component behaves similar to the accordion but alternates between done and pending states instead of active and pending states. The overridden action functions are for documentation purposes only because they clone the functionality of the default ones.

Panel 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam varius arcu nisl, non accumsan elit interdum et. Nunc ut gravida justo. Nulla sit amet est accumsan, condimentum elit nec, dapibus nulla. Aenean eu sapien eget ante placerat pretium a sit amet ante.
Panel 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam varius arcu nisl, non accumsan elit interdum et. Nunc ut gravida justo. Nulla sit amet est accumsan, condimentum elit nec, dapibus nulla. Aenean eu sapien eget ante placerat pretium a sit amet ante.
Panel 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam varius arcu nisl, non accumsan elit interdum et. Nunc ut gravida justo. Nulla sit amet est accumsan, condimentum elit nec, dapibus nulla. Aenean eu sapien eget ante placerat pretium a sit amet ante.
Panel 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam varius arcu nisl, non accumsan elit interdum et. Nunc ut gravida justo. Nulla sit amet est accumsan, condimentum elit nec, dapibus nulla. Aenean eu sapien eget ante placerat pretium a sit amet ante.
This HTML Blueprint requires JavaScript. You may use your own solution, or use Chi's vanilla JavaScript solution, Chi.js.
<div class="chi-epanel -done" data-chi-epanel-group="example6">
  <div class="chi-epanel__header">
    <div class="chi-epanel__title" data-chi-epanel-action="done">Panel 1</div>
    <div class="chi-epanel__content">
      <div class="chi-epanel__collapse">
        <div class="-done--only">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam varius arcu nisl, non accumsan elit
          interdum et. Nunc ut gravida justo. Nulla sit amet est accumsan, condimentum elit nec, dapibus nulla.
          Aenean eu sapien eget ante placerat pretium a sit amet ante.
        </div>
      </div>
    </div>
  </div>
</div>

<div class="chi-epanel" data-chi-epanel-group="example6">
  <div class="chi-epanel__header">
    <div class="chi-epanel__title" data-chi-epanel-action="done">Panel 2</div>
    <div class="chi-epanel__content">
      <div class="chi-epanel__collapse">
        <div class="-done--only">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam varius arcu nisl, non accumsan elit
          interdum et. Nunc ut gravida justo. Nulla sit amet est accumsan, condimentum elit nec, dapibus nulla.
          Aenean eu sapien eget ante placerat pretium a sit amet ante.
        </div>
      </div>
    </div>
  </div>
</div>

<!-- JavaScript -->
<script>
  chi.expansionPanel(
    document.querySelectorAll('[data-chi-epanel-group="example6"]'),
    {
      mode: 'custom',
      changeHandler: function (newState, oldState, expansionPanel, panelGroup) {
        if (newState === chi.EXPANSION_PANEL_STATES.DONE) {
          panelGroup.expansion_panels.forEach(function (exPa) {
            if (exPa !== expansionPanel) {
              exPa.setState(chi.EXPANSION_PANEL_STATES.PENDING.NAME);
            }
          });
        }
      },
      customActions: {
        active: (expansionPanel, epGroup) =>
          expansionPanel.setState(chi.EXPANSION_PANEL_STATES.ACTIVE.NAME),
        done: (expansionPanel, epGroup) =>
          expansionPanel.setState(chi.EXPANSION_PANEL_STATES.DONE.NAME),
        pending: (expansionPanel, epGroup) =>
          expansionPanel.setState(chi.EXPANSION_PANEL_STATES.PENDING.NAME),
        toggle: (expansionPanel, epGroup) => {
          if (expansionPanel._state === chi.EXPANSION_PANEL_STATES.ACTIVE) {
            expansionPanel.setState(chi.EXPANSION_PANEL_STATES.PENDING.NAME);
          } else {
            expansionPanel.setState(chi.EXPANSION_PANEL_STATES.ACTIVE.NAME);
          }
        },
        next: (expansionPanel, epGroup) => {
          epGroup.reset(expansionPanel);
          epGroup.next().setState(chi.EXPANSION_PANEL_STATES.ACTIVE.NAME);
        },
        previous: (expansionPanel, epGroup) => {
          epGroup.reset(expansionPanel);
          epGroup.previous().setState(chi.EXPANSION_PANEL_STATES.ACTIVE.NAME);
        },
        disabled: (expansionPanel, epGroup) =>
          expansionPanel.setState(chi.EXPANSION_PANEL_STATES.DISABLED.NAME)
      }
    }
  );
</script>

Web Component

Properties

Property
Attribute
Description
Type
Default
bordered
bordered
to set the panel style to bordered
boolean
undefined
state
state
to set expansion panel state. Possible values are: {'done', 'active', 'pending' (default value), and 'disabled'}
string
'pending'
step
step
to set a step number next to the title of the panel
string
undefined
title
title
to define expansion panel title.
string
undefined

JavaScript

Actions

You can bind actions to activators inside the expansion panel with the data-chi-epanel-action attribute.

ActionDescription
pendingSets the panel to the pending state. All the contents under the -active--only and the -done--only will not be visible.
activeSets the panel to the active state. All the contents under the -active--only will be visible.
toggleIn the case the panel is previously set to active, this action sets it to pending. It sets to active state otherwise.
doneSets the panel to the done state. All the contents under the -done--only will be visible.
disabledSets the panel to the disabled state. All the contents under the -active--only and the -done--only will not be visible, and the title will render in a soft grey color.
inactiveIs a synonym for pending.
nextSets the next panel in active status.
previousSets the previous panel in active status.

You can freely add, remove or change the data-chi-epanel-action attribute on the fly, as is the main element with the chi-epanel class, the one which listens for the events.

Preventing memory leaks

Expansion panel components have a dispose function to free all resources attached to the element, such as event listeners and object data. You should call this method when you want to remove the component.

var elemArray = document.querySelectorAll('[data-chi-epanel-group="groupName"]');
var expansionPanelsArray = chi.expansionPanel(elemArray);
// do stuff
expansionPanelsArray.forEach(function (expansionPanel) {
  expansionPanel.dispose();
});

It is safe to call the expansionPanel method more than once, as it will return any previously created expansion panel component associated to the element.

var elem = document.getElementById('expansion-panel-1');
var expansionPanelComponent = chi.expansionPanel(elem);
var elem2 = document.getElementById('expansion-panel-1');
var expansionPanelComponent2 = chi.expansionPanel(elem2);
expansionPanelComponent === expansionPanelComponent2; // returns true

expansionPanelComponent.dispose(); // Only have to do it once.

Accessibility

Accessibility guidelines coming soon