Accordion Card
Cassette J-card stack — hot-pink, electric-teal, and neon-yellow 90s hi-fi liners. Click any to expand its A/B side track listing.
Accordion Card the 14th of 22 designs in the 22 CSS Stacked Card Designs 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="scd-accc">
<input type="radio" name="scd-accc" id="scd-accc-1" checked />
<input type="radio" name="scd-accc" id="scd-accc-2" />
<input type="radio" name="scd-accc" id="scd-accc-3" />
<label for="scd-accc-1" class="scd-accc__c" style="--c: #ff3d83; --t: #fff"
><b>SIDE A · 90 MIN</b><span>1. Saturday Night · 4:21</span
><span>2. Late Bloomer · 3:18</span></label
>
<label for="scd-accc-2" class="scd-accc__c" style="--c: #00d4d4; --t: #0a0a14"
><b>SIDE B · 60 MIN</b><span>1. Cobalt Hour · 5:04</span
><span>2. Chrome Eyes · 4:11</span></label
>
<label for="scd-accc-3" class="scd-accc__c" style="--c: #fef34c; --t: #0a0a14"
><b>BONUS · 30 MIN</b><span>1. Mixtape Outro · 2:48</span
><span>2. Studio Banter · 1:16</span></label
>
</div> .scd-accc {
display: flex; flex-direction: column; gap: 4px;
width: 240px; margin: 0 auto;
}
.scd-accc > input { display: none; }
.scd-accc__c {
background: var(--c);
color: var(--t);
border-radius: 0;
border-left: 4px solid #0a0a14;
border-right: 4px solid #0a0a14;
padding: 10px 14px;
cursor: pointer;
display: flex; flex-direction: column; gap: 4px;
height: 26px; overflow: hidden;
transition: height .35s cubic-bezier(.3,1.3,.5,1);
font-family: ui-monospace, monospace;
}
.scd-accc__c b { font: 800 11px/1 ui-monospace, monospace; letter-spacing: 0.18em; }
.scd-accc__c span { font: 11px/1.4 ui-monospace, monospace; opacity: 0.85; }
#scd-accc-1:checked ~ .scd-accc__c:nth-of-type(1),
#scd-accc-2:checked ~ .scd-accc__c:nth-of-type(2),
#scd-accc-3:checked ~ .scd-accc__c:nth-of-type(3) {
height: 78px;
}