26 CSS Accordions — Vertical & Horizontal
Equalizer
Audio-EQ inspired — vertical bars rise to indicate the open row. Pure CSS, no JS.
Equalizer the 23rd 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
<details class="acc-eq" name="acc-eq">
<summary>
<span class="acc-eq__bars" aria-hidden="true"><i></i><i></i><i></i><i></i></span>Bass
</summary>
<p>Low-end response. Felt more than heard. Anchors the mix.</p>
</details>
<details class="acc-eq" name="acc-eq" open>
<summary>
<span class="acc-eq__bars" aria-hidden="true"><i></i><i></i><i></i><i></i></span>Mids
</summary>
<p>The conversation register. Where vocals and lead instruments live.</p>
</details>
<details class="acc-eq" name="acc-eq">
<summary>
<span class="acc-eq__bars" aria-hidden="true"><i></i><i></i><i></i><i></i></span>Treble
</summary>
<p>Air and detail. Cymbals, breath, the sparkle of acoustic plucks.</p>
</details> .acc-eq {
background: #15151d; border: 1px solid rgba(240,238,255,0.06);
border-radius: 8px; margin-bottom: 6px;
}
.acc-eq summary {
display: flex; align-items: center; gap: 12px;
cursor: pointer; list-style: none; padding: 12px 16px;
font: 600 13px/1 system-ui; color: rgba(240,238,255,0.72);
}
.acc-eq summary::-webkit-details-marker { display: none; }
.acc-eq__bars {
display: inline-flex; align-items: flex-end; gap: 2px;
height: 14px; width: 22px;
}
.acc-eq__bars i {
display: block; width: 3px; background: rgba(212,154,92,0.4);
border-radius: 1px; height: 30%; transition: height .3s;
}
.acc-eq[open] > summary { color: #f0eeff; }
.acc-eq[open] .acc-eq__bars i {
background: #d49a5c;
animation: acc-eq-pulse 1.1s ease-in-out infinite alternate;
}
.acc-eq[open] .acc-eq__bars i:nth-child(1) { animation-delay: .0s; }
.acc-eq[open] .acc-eq__bars i:nth-child(2) { animation-delay: .15s; }
.acc-eq[open] .acc-eq__bars i:nth-child(3) { animation-delay: .3s; }
.acc-eq[open] .acc-eq__bars i:nth-child(4) { animation-delay: .45s; }
@keyframes acc-eq-pulse {
from { height: 25%; } to { height: 100%; }
}
.acc-eq p {
margin: 0; padding: 0 16px 14px 50px;
font: 12px/1.6 system-ui; color: rgba(240,238,255,0.55);
}
@media (prefers-reduced-motion: reduce) {
.acc-eq[open] .acc-eq__bars i { animation: none; height: 70%; }
} More from 26 CSS Accordions — Vertical & Horizontal
Brutalist StampGlass FrostedMinimal RailCard LiftStrip TabsImage RevealColor BlockNumbered SpineCurtain SlideVinyl SpineCinema ReelAurora Strip
View the full collection →