Accordion Figma Code Connected

Accordion presents grouped content in expanding and collapsing boxes, with options to only show one item at a time or allow the user to expand as many as they like. These are great for reducing form sections or presenting a lot of content in a small area.

Default accordion

Create a default Accordion group by adding class .hc-accordion to a div or other block-level element. Each item uses a details and summary disclosure combo with class .hc-accordion-item.

The <summary> element should have class .hc-accordion-item-header. Content should immediately follow this element and be wrapped in an .hc-accordion-item-content wrapper.

The default bahavior allows the user to open as many accordions as they’d like, and does not only allow one to be open at a time. For this behavior, the markup is different.

C-3P0 (See-Threepio)

C-3PO, or See-Threepio, is a protocol droid designed to assist in etiquette and translation, and is fluent in over six million forms of communication.

R2-D2 (Artoo-Detoo)

An R2-series astromech droid manufactured by Industrial Automaton with masculine programming. A smart, spunky droid who would serve a multitude of masters over his lifetime, R2-D2 was never given a full memory wipe nor did he ever receive new programming, with these factors resulting in an adventurous and independent attitude.

BB-8 (BeeBee-Ate)

Poe Dameron's astromech droid in the sequel trilogy. BB-8 has a spherical body with a small head that balances on top, and moves by rolling around.

IG-11 (Eyegee-Eleven)

IG-11, also known as Eyegee-Eleven or simply as IG or Eyegee, was a IG-series assassin droid who was a bounty hunter during the New Republic Era. IG-11 was programmed to follow the protocols of the Bounty Hunters' Guild, and had a built-in self-destruct mechanism to prevent itself from being captured while working as a hired gun.

HTML

Expand Edit in Playground Copy


<div class="hc-accordion">
  <details class="hc-accordion-item" open>
    <summary class="hc-accordion-item-header">
      C-3P0 (See-Threepio)
    </summary>
    <div class="hc-accordion-item-content">
      <p class="hc-body">
        C-3PO, or See-Threepio, is a protocol droid designed to assist in etiquette and translation, and is fluent in over six million forms of communication.
      </p>
    </div>
  </details>
  <details class="hc-accordion-item">
    <summary class="hc-accordion-item-header">
      R2-D2 (Artoo-Detoo)
    </summary>
    <div class="hc-accordion-item-content">
      <p class="hc-body">
        An R2-series astromech droid manufactured by Industrial Automaton with masculine programming. A smart, spunky droid who would serve a multitude of masters over his lifetime, R2-D2 was never given a full memory wipe nor did he ever receive new programming, with these factors resulting in an adventurous and independent attitude.
      </p>
    </div>
  </details>
  <details class="hc-accordion-item">
    <summary class="hc-accordion-item-header">
      BB-8 (BeeBee-Ate)
    </summary>
    <div class="hc-accordion-item-content">
      <p class="hc-body">
        Poe Dameron's astromech droid in the sequel trilogy. BB-8 has a spherical body with a small head that balances on top, and moves by rolling around.
      </p>
    </div>
  </details>
  <details class="hc-accordion-item">
    <summary class="hc-accordion-item-header">
      IG-11 (Eyegee-Eleven)
    </summary>
    <div class="hc-accordion-item-content">
      <p class="hc-body">
        IG-11, also known as Eyegee-Eleven or simply as IG or Eyegee, was a IG-series assassin droid who was a bounty hunter during the New Republic Era. IG-11 was programmed to follow the protocols of the Bounty Hunters' Guild, and had a built-in self-destruct mechanism to prevent itself from being captured while working as a hired gun. 
      </p>
    </div>
  </details>
</div>

Accordion options

If you’d like to open any items by default, simply append the open attribute on any details elements.

The color of the marker (chevron) is determined by any brand theme set in the body element. Learn more about brand theming.

Animations

All Accordion types have a subtle 200ms transition when expanding and collapsing, along with a rotate effect on the chevron.

Because we’re using the details element, and because display is still not animate-able in 2025, we have to use a new CSS animation property (transition-behavior: allow-discrete;) as well as the function calc-size() to achieve this.

The later is not yet available in Firefox or Safari but does have Chrome/IE support. Accordions do not currently animate for most Apple devices, then, though support should be coming soon.

Single item display

To only show one item open at a time, append .hc-accordion--single to the parent element and note that the markup for the Accordion has to change to be based on radio buttons instead.

Make sure that each radio button inside an individual Accordion has the same name. If you use multiple instances on a page, they all need to have a different name.

C-3P0 (See-Threepio)

C-3PO, or See-Threepio, is a protocol droid designed to assist in etiquette and translation, and is fluent in over six million forms of communication.

R2-D2 (Artoo-Detoo)

BB-8 (BeeBee-Ate)

Poe Dameron's astromech droid in the sequel trilogy. BB-8 has a spherical body with a small head that balances on top, and moves by rolling around.

IG-11 (Eyegee-Eleven)

HTML

Expand Edit in Playground Copy


<div class="hc-accordion hc-accordion--single">
  <div class="hc-accordion-item">
    <label class="hc-accordion-item-header hc-accordion-item-control">
      <input type="radio" name="accordion1" class="hc-radio" checked="checked" />
      <span>C-3P0 (See-Threepio)</span>
    </label>
    <div class="hc-accordion-item-content">
      <p class="hc-body">
        C-3PO, or See-Threepio, is a protocol droid designed to assist in etiquette and translation, and is fluent in over six million forms of communication.
      </p>
    </div>
  </div>
  <div class="hc-accordion-item">
    <label class="hc-accordion-item-header hc-accordion-item-control">
      <input type="radio" name="accordion1" class="hc-radio" checked="checked" />
      <span>R2-D2 (Artoo-Detoo)</span>
    </label>
    <div class="hc-accordion-item-content">
      <p class="hc-body">
        An R2-series astromech droid manufactured by Industrial Automaton with masculine programming. A smart, spunky droid who would serve a multitude of masters over his lifetime, R2-D2 was never given a full memory wipe nor did he ever receive new programming, with these factors resulting in an adventurous and independent attitude.
      </p>
    </div>
  </div>
  <div class="hc-accordion-item">
    <label class="hc-accordion-item-header hc-accordion-item-control">
      <input type="radio" name="accordion1" class="hc-radio" checked="checked" />
      <span>BB-8 (BeeBee-Ate)</span>
    </label>
    <div class="hc-accordion-item-content">
      <p class="hc-body">
        Poe Dameron's astromech droid in the sequel trilogy. BB-8 has a spherical body with a small head that balances on top, and moves by rolling around.
      </p>
    </div>
  </div>
  <div class="hc-accordion-item">
    <label class="hc-accordion-item-header hc-accordion-item-control">
      <input type="radio" name="accordion1" class="hc-radio" />
      <span>IG-11 (Eyegee-Eleven)</span>
    </label>
    <div class="hc-accordion-item-content">
      <p class="hc-body">
        IG-11, also known as Eyegee-Eleven or simply as IG or Eyegee, was a IG-series assassin droid who was a bounty hunter during the New Republic Era. IG-11 was programmed to follow the protocols of the Bounty Hunters' Guild, and had a built-in self-destruct mechanism to prevent itself from being captured while working as a hired gun. 
      </p>
    </div>
  </div>
</div>

Note that the markup changes with this variation, but the animations should be as close to the same as possible for the browsers that support the CSS properties.

Borderless variants

Remove the borders and background colors from either Accordion option by appending the class .hc-accordion--minimal. No other markup changes are necessary.

Default Accordion

C-3P0 (See-Threepio)

C-3PO, or See-Threepio, is a protocol droid designed to assist in etiquette and translation, and is fluent in over six million forms of communication.

R2-D2 (Artoo-Detoo)

Single item display Accordion

BB-8 (BeeBee-Ate)

Poe Dameron's astromech droid in the sequel trilogy. BB-8 has a spherical body with a small head that balances on top, and moves by rolling around.

IG-11 (Eyegee-Eleven)

HTML

Expand Edit in Playground Copy


<strong>Default Accordion</strong>
<div class="hc-accordion hc-accordion--minimal">
  <details class="hc-accordion-item" open>
    <summary class="hc-accordion-item-header">
      C-3P0 (See-Threepio)
    </summary>
    <div class="hc-accordion-item-content">
      <p class="hc-body">
        C-3PO, or See-Threepio, is a protocol droid designed to assist in etiquette and translation, and is fluent in over six million forms of communication.
      </p>
    </div>
  </details>
  <details class="hc-accordion-item">
    <summary class="hc-accordion-item-header">
      R2-D2 (Artoo-Detoo)
    </summary>
    <div class="hc-accordion-item-content">
      <p class="hc-body">
        An R2-series astromech droid manufactured by Industrial Automaton with masculine programming. A smart, spunky droid who would serve a multitude of masters over his lifetime, R2-D2 was never given a full memory wipe nor did he ever receive new programming, with these factors resulting in an adventurous and independent attitude.
      </p>
    </div>
  </details>
</div>
<strong class="mt-8">Single item display Accordion</strong>
<div class="hc-accordion hc-accordion--single hc-accordion--minimal">
  <div class="hc-accordion-item">
    <label class="hc-accordion-item-header hc-accordion-item-control">
      <input type="radio" name="accordion1" class="hc-radio" checked="checked" />
      <span>BB-8 (BeeBee-Ate)</span>
    </label>
    <div class="hc-accordion-item-content">
      <p class="hc-body">
        Poe Dameron's astromech droid in the sequel trilogy. BB-8 has a spherical body with a small head that balances on top, and moves by rolling around.
      </p>
    </div>
  </div>
  <div class="hc-accordion-item">
    <label class="hc-accordion-item-header hc-accordion-item-control">
      <input type="radio" name="accordion1" class="hc-radio" />
      <span>IG-11 (Eyegee-Eleven)</span>
    </label>
    <div class="hc-accordion-item-content">
      <p class="hc-body">
        IG-11, also known as Eyegee-Eleven or simply as IG or Eyegee, was a IG-series assassin droid who was a bounty hunter during the New Republic Era. IG-11 was programmed to follow the protocols of the Bounty Hunters' Guild, and had a built-in self-destruct mechanism to prevent itself from being captured while working as a hired gun. 
      </p>
    </div>
  </div>
</div>