26 CSS Accordions — Vertical & Horizontal

Stepped Stair

Each row indents progressively, creating a staircase — open row pulls back to flush left.

Pure CSS MIT licensed

Stepped Stair the 18th of 26 designs in the 26 CSS Accordions — Vertical & Horizontal collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.

Live preview

Open in playground

The code

<details class="acc-stair" name="acc-stair" style="--i: 0" open>
  <summary>Step one</summary>
  <p>Begin where you stand. The first move matters more than the plan.</p>
</details>
<details class="acc-stair" name="acc-stair" style="--i: 1">
  <summary>Step two</summary>
  <p>Ship the rough version. Real feedback beats imagined feedback.</p>
</details>
<details class="acc-stair" name="acc-stair" style="--i: 2">
  <summary>Step three</summary>
  <p>Refine. Cut what didn't earn its place. Keep the load light.</p>
</details>
<details class="acc-stair" name="acc-stair" style="--i: 3">
  <summary>Step four</summary>
  <p>Repeat the loop. Compounding shows up after the tenth turn, not the first.</p>
</details>

.acc-stair {
  margin-bottom: 4px;
  margin-left: calc(var(--i,0) * 16px);
  background: rgba(143,179,163,0.07);
  border-left: 3px solid #8fb3a3;
  border-radius: 0 8px 8px 0;
  transition: margin-left .35s cubic-bezier(.3,1.3,.5,1), background .25s;
}
.acc-stair summary {
  cursor: pointer; list-style: none; padding: 11px 14px;
  font: 600 13px/1.3 system-ui; color: rgba(240,238,255,0.7);
}
.acc-stair summary::-webkit-details-marker { display: none; }
.acc-stair[open] {
  margin-left: 0; background: rgba(143,179,163,0.15);
}
.acc-stair[open] > summary { color: #f0eeff; }
.acc-stair p {
  margin: 0; padding: 0 14px 12px;
  font: 12px/1.55 system-ui; color: rgba(240,238,255,0.6);
}

More from 26 CSS Accordions — Vertical & Horizontal

Code Comment Paper Folded Equalizer Stacked Cards Holographic Slot Aurora Drift Underline Reveal Numbered Steps Plus / Minus Morph Chevron Rotate Brutalist Stamp Glass Frosted

View the full collection →