26 CSS Accordions — Vertical & Horizontal
Color Block
Solid color blocks switch via radio inputs; the active block expands and reveals body copy.
Color Block the 11th 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-cblk">
<input type="radio" name="cblk" id="cblk-1" checked />
<input type="radio" name="cblk" id="cblk-2" />
<input type="radio" name="cblk" id="cblk-3" />
<label for="cblk-1" class="acc-cblk__b" style="--bg: #9c7bd6">
<span class="acc-cblk__t">Amethyst</span>
<span class="acc-cblk__d">Royal violet anchor of the system. Use for primary actions.</span>
</label>
<label for="cblk-2" class="acc-cblk__b" style="--bg: #d49a5c">
<span class="acc-cblk__t">Copper</span>
<span class="acc-cblk__d">Warm metallic accent. Use sparingly for highlights and badges.</span>
</label>
<label for="cblk-3" class="acc-cblk__b" style="--bg: #8fb3a3">
<span class="acc-cblk__t">Sage</span>
<span class="acc-cblk__d">Cool restorative neutral. Use for success and secondary chrome.</span>
</label>
</div> .acc-cblk { display: flex; height: 220px; border-radius: 12px; overflow: hidden; }
.acc-cblk > input { display: none; }
.acc-cblk__b {
flex: 1; cursor: pointer; padding: 16px;
display: flex; flex-direction: column; justify-content: space-between;
background: var(--bg); color: #15151d;
transition: flex .5s cubic-bezier(.3,1,.3,1);
}
.acc-cblk__t {
font: 800 13px/1 system-ui; letter-spacing: 0.1em;
text-transform: uppercase;
}
.acc-cblk__d {
font: 12px/1.55 system-ui; opacity: 0;
transform: translateY(8px); transition: all .3s .12s;
}
#cblk-1:checked ~ [for="cblk-1"],
#cblk-2:checked ~ [for="cblk-2"],
#cblk-3:checked ~ [for="cblk-3"] { flex: 4; }
#cblk-1:checked ~ [for="cblk-1"] .acc-cblk__d,
#cblk-2:checked ~ [for="cblk-2"] .acc-cblk__d,
#cblk-3:checked ~ [for="cblk-3"] .acc-cblk__d {
opacity: 1; transform: none;
} More from 26 CSS Accordions — Vertical & Horizontal
Paper FoldedEqualizerStacked CardsHolographic SlotAurora DriftUnderline RevealNumbered StepsPlus / Minus MorphChevron RotateBrutalist StampGlass FrostedMinimal Rail
View the full collection →