Expansion panel

Expansion panels are components designed to be folded and stacked in sequence. They have four states: active, pending, done and disabled. When pending, 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. Three classes represent these states: -done, -active, and -disabled. Pending is the default state.

This component requires Javascript

Active panel title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. At atque consequatur consequuntur excepturi illo maiores, nobis placeat recusandae rem! Accusantium ad in minus molestiae? Commodi cupiditate labore nihil sed veritatis!

Done
Active
Pending
Disabled

<div class="m-epanel -done">
  <div class="m-epanel__header">
    <div class="m-epanel__number">1.</div>
    <div class="m-epanel__title">Expansion panel</div>
    <div class="m-epanel__content">
      <div class="m-epanel__collapse">
        <div class="-done--only">CenturyLink...</div>
      </div>
    </div>
    <div class="m-epanel__action -done--only">
      <button class="a-btn -primary -flat">Change</button>
    </div>
  </div>
</div>

<div class="m-epanel -active">
  <div class="m-epanel__header">
    <div class="m-epanel__number">2.</div>
    <div class="m-epanel__title">Active panel</div>
  </div>
  <div class="m-epanel__collapse">
    <div class="-active--only">
      <div class="m-epanel__body">
        <div class="m-epanel__content">
          <div class="m-epanel__subtitle">Active panel title</div>
          <p class="m-epanel__text">Lorem ipsum</p>
        </div>
        <div class="m-epanel__footer -justify-content--end">
          <button class="a-btn -lg -primary -ml--2">Continue</button>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="m-epanel">
  <div class="m-epanel__header">
    <div class="m-epanel__number">3.</div>
    <div class="m-epanel__title">Pending panel</div>
  </div>
</div>

<div class="m-epanel -disabled">
  <div class="m-epanel__header">
    <div class="m-epanel__number">4.</div>
    <div class="m-epanel__title">Disabled panel</div>
  </div>
</div>

Customization

This component accepts a small number of visual changes. The numbering of the panels is optional, so you can omit the m-epanel__number class elements. In this case, the active content will render with a not desired margin, that can be removed with the -ml--0 class.

Active panel title

<div class="m-epanel -done">
  <div class="m-epanel__header">
    <div class="m-epanel__title">Expansion panel</div>
    <div class="m-epanel__action -done--only">
      <button class="a-btn -primary -flat">Change</button>
    </div>
  </div>
  <div class="m-epanel__collapse -ml--0">
    <div class="-active--only">
      <div class="m-epanel__body">
        <div class="m-epanel__content">
          <div class="m-epanel__subtitle">Active panel title</div>
          <p class="m-epanel__text">Lorem ipsum...</p>
        </div>
        <div class="m-epanel__footer -justify-content--end">
          <button class="a-btn -lg">Previous</button>
          <button class="a-btn -lg -primary -ml--2">Continue</button>
        </div>
      </div>
    </div>
  </div>
</div>

Bordered expansion panel

Expansion panel components also support a bordered version. Apply the -bordered class where desired.

Active panel title

Done
Active
Pending
Disabled

<div class="m-epanel -bordered -done">
  <div class="m-epanel__header">
    <div class="m-epanel__number">1.</div>
    <div class="m-epanel__title">Expansion panel</div>
    <div class="m-epanel__content">
      <div class="m-epanel__collapse">
        <div class="-done--only">CenturyLink...</div>
      </div>
    </div>
    <div class="m-epanel__action -done--only">
      <button class="a-btn -primary -flat">Change</button>
    </div>
  </div>
</div>

<div class="m-epanel -bordered -active">
  <div class="m-epanel__header">
    <div class="m-epanel__number">2.</div>
    <div class="m-epanel__title">Active panel</div>
  </div>
  <div class="m-epanel__collapse">
    <div class="-active--only">
      <div class="m-epanel__body">
        <div class="m-epanel__content">
          <div class="m-epanel__subtitle">Active panel title</div>
          <p class="m-epanel__text">Lorem ipsum</p>
        </div>
        <div class="m-epanel__footer -justify-content--end">
          <button class="a-btn -lg -primary -ml--2">Continue</button>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="m-epanel -bordered">
  <div class="m-epanel__header">
    <div class="m-epanel__number">3.</div>
    <div class="m-epanel__title">Pending panel</div>
  </div>
</div>

<div class="m-epanel -bordered -disabled">
  <div class="m-epanel__header">
    <div class="m-epanel__number">4.</div>
    <div class="m-epanel__title">Disabled panel</div>
  </div>
</div>

State custom behavior

The four expansion panel states behave very similar one from each other. For example, you shouldn't, but you may use an m-epanel__footer element in a pending panel, or an m-epanel__action button in an active panel.

There are two main differences between them.

The title will render in the brand color for the active panel, in soft gray for the disabled panel and black for the other panel states.
Two hiding utility classes will hide content depending on the state.

Hiding by state

The four examples below differ only on the state. Thanks to the state support and the -active--only and -done--only utility classes, we can represent the three states of the same content changing only the state class.

TipIt is not a best practice to use this utility classes in frontend frameworks such as Angular, React or Vue as they have their own solutions to accomplish this goal.

Active panel title

Done
Active
Pending
Disabled

<div class="m-epanel -done">
  <div class="m-epanel__header">
    <div class="m-epanel__title">Expansion panel</div>
    <div class="m-epanel__content">
      <div class="m-epanel__collapse">
        <div class="-done--only">CenturyLink...</div>
      </div>
    </div>
    <div class="m-epanel__action -done--only">
      <button class="a-btn -primary -flat">Change</button>
    </div>
  </div>
  <div class="m-epanel__collapse -ml--0">
    <div class="-active--only">
      <div class="m-epanel__body">
        <div class="m-epanel__content">
          <div class="m-epanel__subtitle">Active panel title</div>
          <p class="m-epanel__text">Lorem ipsum...</p>
        </div>
        <div class="m-epanel__footer -justify-content--end">
          <button class="a-btn -lg">Previous</button>
          <button class="a-btn -lg -primary -ml--2">Continue</button>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="m-epanel -active">
  <div class="m-epanel__header">
    <div class="m-epanel__title">Expansion panel</div>
    <div class="m-epanel__content">
      <div class="m-epanel__collapse">
        <div class="-done--only">CenturyLink...</div>
      </div>
    </div>
    <div class="m-epanel__action -done--only">
      <button class="a-btn -primary -flat">Change</button>
    </div>
  </div>
  <div class="m-epanel__collapse -ml--0">
    <div class="-active--only">
      <div class="m-epanel__body">
        <div class="m-epanel__content">
          <div class="m-epanel__subtitle">Active panel title</div>
          <p class="m-epanel__text">Lorem ipsum...</p>
        </div>
        <div class="m-epanel__footer -justify-content--end">
          <button class="a-btn -lg">Previous</button>
          <button class="a-btn -lg -primary -ml--2">Continue</button>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="m-epanel">
  <div class="m-epanel__header">
    <div class="m-epanel__title">Expansion panel</div>
    <div class="m-epanel__content">
      <div class="m-epanel__collapse">
        <div class="-done--only">CenturyLink...</div>
      </div>
    </div>
    <div class="m-epanel__action -done--only">
      <button class="a-btn -primary -flat">Change</button>
    </div>
  </div>
  <div class="m-epanel__collapse -ml--0">
    <div class="-active--only">
      <div class="m-epanel__body">
        <div class="m-epanel__content">
          <div class="m-epanel__subtitle">Active panel title</div>
          <p class="m-epanel__text">Lorem ipsum...</p>
        </div>
        <div class="m-epanel__footer -justify-content--end">
          <button class="a-btn -lg">Previous</button>
          <button class="a-btn -lg -primary -ml--2">Continue</button>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="m-epanel -disabled">
  <div class="m-epanel__header">
    <div class="m-epanel__title">Expansion panel</div>
    <div class="m-epanel__content">
      <div class="m-epanel__collapse">
        <div class="-done--only">CenturyLink...</div>
      </div>
    </div>
    <div class="m-epanel__action -done--only">
      <button class="a-btn -primary -flat">Change</button>
    </div>
  </div>
  <div class="m-epanel__collapse -ml--0">
    <div class="-active--only">
      <div class="m-epanel__body">
        <div class="m-epanel__content">
          <div class="m-epanel__subtitle">Active panel title</div>
          <p class="m-epanel__text">Lorem ipsum...</p>
        </div>
        <div class="m-epanel__footer -justify-content--end">
          <button class="a-btn -lg">Previous</button>
          <button class="a-btn -lg -primary -ml--2">Continue</button>
        </div>
      </div>
    </div>
  </div>
</div>