26 CSS Accordions — Vertical & Horizontal
Curtain Slide
Active panel slides in from the right while the previous one collapses left — like a stage curtain.
Curtain Slide the 13th 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-curt">
<input type="radio" name="curt" id="curt-1" checked />
<input type="radio" name="curt" id="curt-2" />
<input type="radio" name="curt" id="curt-3" />
<div class="acc-curt__tabs">
<label for="curt-1">ONE</label>
<label for="curt-2">TWO</label>
<label for="curt-3">THREE</label>
</div>
<div class="acc-curt__stage">
<div class="acc-curt__p" data-i="0">
<h4>First Act</h4>
<p>The curtain rises slowly. Light spills across the boards.</p>
</div>
<div class="acc-curt__p" data-i="1">
<h4>Second Act</h4>
<p>Tension builds. The rhythm tightens. We lean forward.</p>
</div>
<div class="acc-curt__p" data-i="2">
<h4>Third Act</h4>
<p>Resolution arrives. The audience exhales. Lights dim.</p>
</div>
</div>
</div> .acc-curt {
display: flex; flex-direction: column; height: 220px;
border-radius: 12px; overflow: hidden;
background: #1a1a24; border: 1px solid rgba(240,238,255,0.06);
}
.acc-curt > input { display: none; }
.acc-curt__tabs {
display: flex; background: #15151d;
border-bottom: 1px solid rgba(240,238,255,0.06);
}
.acc-curt__tabs label {
flex: 1; padding: 11px; cursor: pointer;
font: 700 11px/1 system-ui; letter-spacing: 0.14em; text-align: center;
color: rgba(240,238,255,0.5); transition: color .2s, background .2s;
}
.acc-curt__tabs label:hover { color: #f0eeff; }
.acc-curt__stage { position: relative; flex: 1; overflow: hidden; }
.acc-curt__p {
position: absolute; inset: 0; padding: 18px;
transform: translateX(100%); opacity: 0;
transition: transform .5s cubic-bezier(.3,1,.3,1), opacity .35s;
}
.acc-curt__p h4 { margin: 0 0 8px; font: 700 14px/1.2 system-ui; color: #d49a5c; }
.acc-curt__p p { margin: 0; font: 12px/1.55 system-ui; color: rgba(240,238,255,0.7); }
#curt-1:checked ~ .acc-curt__tabs label[for="curt-1"],
#curt-2:checked ~ .acc-curt__tabs label[for="curt-2"],
#curt-3:checked ~ .acc-curt__tabs label[for="curt-3"] {
color: #f0eeff; background: rgba(156,123,214,0.18);
}
#curt-1:checked ~ .acc-curt__stage [data-i="0"],
#curt-2:checked ~ .acc-curt__stage [data-i="1"],
#curt-3:checked ~ .acc-curt__stage [data-i="2"] {
transform: translateX(0); opacity: 1;
} More from 26 CSS Accordions — Vertical & Horizontal
Image RevealColor BlockNumbered SpineVinyl SpineCinema ReelAurora StripDiagonal SlantStepped StairCircular ArcMarquee HeaderCode CommentPaper Folded
View the full collection →