26 CSS Accordions — Vertical & Horizontal
Strip Tabs
Horizontal column accordion — each strip widens when activated, others compress to a label.
Strip Tabs the 9th 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
The code
<div class="acc-strip">
<input type="radio" name="strip" id="strip-1" checked />
<input type="radio" name="strip" id="strip-2" />
<input type="radio" name="strip" id="strip-3" />
<input type="radio" name="strip" id="strip-4" />
<label for="strip-1" class="acc-strip__col" data-c="0">
<span class="acc-strip__title">DESIGN</span>
<span class="acc-strip__body"
>Compose from atomic tokens. Stay consistent across surfaces and scale.</span
>
</label>
<label for="strip-2" class="acc-strip__col" data-c="1">
<span class="acc-strip__title">BUILD</span>
<span class="acc-strip__body">Hand-coded HTML and CSS, no framework lock-in. Ship faster.</span>
</label>
<label for="strip-3" class="acc-strip__col" data-c="2">
<span class="acc-strip__title">SHIP</span>
<span class="acc-strip__body">Static output, edge-cached, instant on every connection.</span>
</label>
<label for="strip-4" class="acc-strip__col" data-c="3">
<span class="acc-strip__title">REPEAT</span>
<span class="acc-strip__body">Iterate without rewriting. Components compose cleanly.</span>
</label>
</div> .acc-strip {
display: flex; gap: 4px; height: 220px; width: 100%;
border-radius: 12px; overflow: hidden;
}
.acc-strip > input { display: none; }
.acc-strip__col {
flex: 1 1 0; cursor: pointer; padding: 16px 14px;
display: flex; flex-direction: column; justify-content: flex-end;
position: relative; overflow: hidden;
background: #1a1a24; color: rgba(240,238,255,0.7);
transition: flex .55s cubic-bezier(.3,1,.3,1), background .4s;
}
.acc-strip__col[data-c="0"] { background: linear-gradient(160deg,#3a2a55,#1a1a24); }
.acc-strip__col[data-c="1"] { background: linear-gradient(160deg,#553a2a,#1a1a24); }
.acc-strip__col[data-c="2"] { background: linear-gradient(160deg,#2a553a,#1a1a24); }
.acc-strip__col[data-c="3"] { background: linear-gradient(160deg,#553a55,#1a1a24); }
.acc-strip__title {
font: 800 11px/1 system-ui; letter-spacing: 0.18em;
writing-mode: vertical-rl; transform: rotate(180deg);
align-self: flex-start; transition: all .35s;
}
.acc-strip__body {
font: 12px/1.55 system-ui; color: rgba(240,238,255,0.78);
opacity: 0; max-height: 0; transition: opacity .3s .15s, max-height .35s;
}
#strip-1:checked ~ [for="strip-1"],
#strip-2:checked ~ [for="strip-2"],
#strip-3:checked ~ [for="strip-3"],
#strip-4:checked ~ [for="strip-4"] {
flex: 5 1 0; color: #f0eeff;
}
#strip-1:checked ~ [for="strip-1"] .acc-strip__title,
#strip-2:checked ~ [for="strip-2"] .acc-strip__title,
#strip-3:checked ~ [for="strip-3"] .acc-strip__title,
#strip-4:checked ~ [for="strip-4"] .acc-strip__title {
writing-mode: horizontal-tb; transform: none; font-size: 14px;
align-self: stretch;
}
#strip-1:checked ~ [for="strip-1"] .acc-strip__body,
#strip-2:checked ~ [for="strip-2"] .acc-strip__body,
#strip-3:checked ~ [for="strip-3"] .acc-strip__body,
#strip-4:checked ~ [for="strip-4"] .acc-strip__body {
opacity: 1; max-height: 100px; margin-top: 8px;
} More from 26 CSS Accordions — Vertical & Horizontal
Minimal RailCard LiftImage RevealColor BlockNumbered SpineCurtain SlideVinyl SpineCinema ReelAurora StripDiagonal SlantStepped StairCircular Arc
View the full collection →