26 CSS Accordions — Vertical & Horizontal

Numbered Spine

Vertical numbered labels rotate to horizontal when their column expands.

Pure CSS MIT licensed

Numbered Spine the 12th 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

<div class="acc-spine">
  <input type="radio" name="spine" id="sp-1" checked />
  <input type="radio" name="spine" id="sp-2" />
  <input type="radio" name="spine" id="sp-3" />
  <label for="sp-1" class="acc-spine__c">
    <span class="acc-spine__n">01</span>
    <span class="acc-spine__t">Discover</span>
    <span class="acc-spine__b">Map the problem space. Talk to users. Sketch hypotheses.</span>
  </label>
  <label for="sp-2" class="acc-spine__c">
    <span class="acc-spine__n">02</span>
    <span class="acc-spine__t">Define</span>
    <span class="acc-spine__b">Pick one bet. Frame it crisply. Write what success looks like.</span>
  </label>
  <label for="sp-3" class="acc-spine__c">
    <span class="acc-spine__n">03</span>
    <span class="acc-spine__t">Deliver</span>
    <span class="acc-spine__b">Ship a thin slice. Measure. Decide what's next.</span>
  </label>
</div>

.acc-spine {
  display: flex; gap: 2px; height: 220px;
  border-radius: 12px; overflow: hidden; background: rgba(240,238,255,0.04);
}
.acc-spine > input { display: none; }
.acc-spine__c {
  flex: 1; cursor: pointer; padding: 14px;
  background: #1a1a24; position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 10px;
  transition: flex .5s cubic-bezier(.3,1,.3,1), background .3s;
}
.acc-spine__n {
  font: 800 18px monospace; color: rgba(212,154,92,0.8);
}
.acc-spine__t {
  font: 700 12px/1 system-ui; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(240,238,255,0.55);
  writing-mode: vertical-rl; transform: rotate(180deg);
  transition: all .35s;
}
.acc-spine__b {
  font: 12px/1.55 system-ui; color: rgba(240,238,255,0.65);
  opacity: 0; max-height: 0; transition: opacity .3s .15s, max-height .35s;
}
#sp-1:checked ~ [for="sp-1"],
#sp-2:checked ~ [for="sp-2"],
#sp-3:checked ~ [for="sp-3"] {
  flex: 4; background: linear-gradient(180deg,#1a1a24,#2a2438);
}
#sp-1:checked ~ [for="sp-1"] .acc-spine__t,
#sp-2:checked ~ [for="sp-2"] .acc-spine__t,
#sp-3:checked ~ [for="sp-3"] .acc-spine__t {
  writing-mode: horizontal-tb; transform: none; color: #f0eeff; font-size: 14px;
}
#sp-1:checked ~ [for="sp-1"] .acc-spine__b,
#sp-2:checked ~ [for="sp-2"] .acc-spine__b,
#sp-3:checked ~ [for="sp-3"] .acc-spine__b {
  opacity: 1; max-height: 120px;
}

More from 26 CSS Accordions — Vertical & Horizontal

Plus / Minus Morph Chevron Rotate Brutalist Stamp Glass Frosted Minimal Rail Card Lift Strip Tabs Image Reveal Color Block Curtain Slide Vinyl Spine Cinema Reel

View the full collection →