Accordion – Design Portal

The accordion is a vertically stacked list of items. Each item can be “expanded” or “collapsed” to reveal the content associated with that item.

Demo

Auto Insurance

Auto Insurance is required for drivers in the US. This accordion spoiler is open by default.

Banking

Hidden content about Banking.

Car Sharing

Hidden content about Car Sharing.

<div class="accordion">
  <div class="accordion__entry">
    <details class="accordion__details" open="">
      <summary class="accordion__summary">
        <div class="accordion__icon"></div>
        <h3 class="accordion__heading accordion__heading--active">Auto Insurance</h3>
      </summary>
      <div class="accordion__content">Auto Insurance is required for drivers in the US. This accordion spoiler is open by default. </div>
    </details>
  </div>
  <div class="accordion__entry">
    <details class="accordion__details">
      <summary class="accordion__summary">
        <div class="accordion__icon"></div>
        <h3 class="accordion__heading">Banking</h3>
      </summary>
      <div class="accordion__content">Hidden content about Banking. </div>
    </details>
  </div>
  <div class="accordion__entry">
    <details class="accordion__details">
      <summary class="accordion__summary">
        <div class="accordion__icon"></div>
        <h3 class="accordion__heading">Car Sharing</h3>
      </summary>
    <div class="accordion__content">Hidden content about Car Sharing.</div>
    </details>
  </div>
</div>

.accordion {
  inline-size: 100%;

  &__content {
    color: var(--black);
    padding: 0 0.9375rem 0.9375rem 0.9375rem;
  }

  details &__icon {
    background: url(#{$assetPath}/accordion-icon-arrow.svg) no-repeat center / contain;
  }

  details[open] {
    .accordion {
      &__icon {
        background: url(#{$assetPath}/accordion-icon-close.svg) no-repeat center / contain;
      }

      &__summary {
        padding-block-end: 1.8rem;
      }

      &__heading {
        &::after {
          background-color: var(--primary);
          block-size: 0.1875rem;
          content: "";
          inline-size: 4rem;
          inset-block-end: -0.875rem;
          inset-inline-start: 0;
          position: absolute;
        }
      }
    }
  }

  &__entry {
    position: relative;
    border: 0.0625rem solid var(--light-gray-1);
    border-block-end: none;

    &:first-of-type {
      border-top-left-radius: 0.3125rem;
      border-top-right-radius: 0.3125rem;
    }
    &:last-of-type {
      border-bottom: 0.0625rem solid var(--light-gray-1);
      border-bottom-left-radius: 0.3125rem;
      border-bottom-right-radius: 0.3125rem;
    }
  }

  &__entry + br {
    display: none;
  }

  &__heading {
    color: var(--black);
    cursor: pointer;
    font-size: 1.25rem;
    margin-block-end: 0;
    position: relative;

    &:hover {
      color: var(--dark-gray-1);
    }
  }

  &__icon {
    block-size: 1.125rem;
    cursor: pointer;
    inline-size: 1.125rem;
    inset-block-start: 0.9375rem;
    inset-inline-end: 0.9375rem;
    position: absolute;
  }

  &__summary {
    list-style: none;
    padding: 0.9375rem;

    &::-webkit-details-marker,
    &::marker {
      display: none;
    }
  }
}

The accordion is created without any Javascript! 😀

It makes use of a browser native details and summary element. Read more here.

States & Variations

Open

An attribute of open is added to the details element

Auto Insurance

Auto Insurance is required for drivers in the US. This accordion spoiler is open by default.

<div class="accordion">
  <div class="accordion__entry">
  <details class="accordion__details" open="">
    <summary class="accordion__summary">
      <div class="accordion__icon"></div>
      <h3 class="accordion__heading accordion__heading--active">Auto Insurance</h3>
    </summary>
    <div class="accordion__content">Auto Insurance is required for drivers in the US. This accordion spoiler is open by default. </div>
  </details>
  </div>
</div>

Closed

No attribute is added to the details element

Auto Insurance

Auto Insurance is required for drivers in the US.

<div class="accordion">
  <div class="accordion__entry">
    <details class="accordion__details">
      <summary class="accordion__summary">
        <div class="accordion__icon"></div>
        <h3 class="accordion__heading accordion__heading--active">Auto Insurance</h3>
      </summary>
      <div class="accordion__content">Auto Insurance is required for drivers in the US.</div>
    </details>
  </div>
</div>

Usage

An accordion can be applied to a Wordpress post by adding in this shortcode. Appropriate HTML will be rendered on output.

[unified_accordion]
[unified_spoiler title="Auto Insurance" style="default" open="yes"]Auto Insurance is required for drivers in the US. This accordion spoiler is open by default. [/unified_spoiler]
[unified_spoiler title="Banking"]Hidden content about Banking. [/unified_spoiler]
[unified_spoiler title="Car Sharing"]Hidden content about Car Sharing.[/unified_spoiler]
[/unified_accordion]

Anatomy

Accordion
Accordion Content
Accordion Summary/Heading
Accordion Icon
Accordion Details