26 CSS Accordions — Vertical & Horizontal 20 / 26
Marquee Header
Closed rows scroll their title as a slow marquee; opening pauses the marquee and reveals body.
The code
<details class="acc-marq" name="acc-marq">
<summary>
<span class="acc-marq__t"
>A long-running show that scrolls until you click · A long-running show that scrolls until you
click · </span
>
</summary>
<p>Stop the marquee. The title settles. The body opens. Calm restored.</p>
</details>
<details class="acc-marq" name="acc-marq" open>
<summary>
<span class="acc-marq__t"
>Now open · The motion holds still · Now open · The motion holds still · </span
>
</summary>
<p>The opened panel doesn't animate its title. Use marquee for "more here than fits."</p>
</details>
<details class="acc-marq" name="acc-marq">
<summary>
<span class="acc-marq__t"
>Tap to open · Hover anywhere to slow down · Tap to open · Hover anywhere · </span
>
</summary>
<p>Marquee speed pairs nicely with hover-to-pause for accessibility on long titles.</p>
</details> <details class="acc-marq" name="acc-marq">
<summary>
<span class="acc-marq__t"
>A long-running show that scrolls until you click · A long-running show that scrolls until you
click · </span
>
</summary>
<p>Stop the marquee. The title settles. The body opens. Calm restored.</p>
</details>
<details class="acc-marq" name="acc-marq" open>
<summary>
<span class="acc-marq__t"
>Now open · The motion holds still · Now open · The motion holds still · </span
>
</summary>
<p>The opened panel doesn't animate its title. Use marquee for "more here than fits."</p>
</details>
<details class="acc-marq" name="acc-marq">
<summary>
<span class="acc-marq__t"
>Tap to open · Hover anywhere to slow down · Tap to open · Hover anywhere · </span
>
</summary>
<p>Marquee speed pairs nicely with hover-to-pause for accessibility on long titles.</p>
</details>.acc-marq {
margin-bottom: 6px; background: rgba(212,154,92,0.06);
border: 1px solid rgba(212,154,92,0.16); border-radius: 8px;
overflow: hidden;
}
.acc-marq summary {
cursor: pointer; list-style: none;
padding: 12px 0; overflow: hidden; position: relative;
}
.acc-marq summary::-webkit-details-marker { display: none; }
.acc-marq__t {
display: inline-block; white-space: nowrap;
font: 600 13px/1 system-ui; color: rgba(240,238,255,0.78);
padding-left: 100%;
animation: acc-marq-roll 14s linear infinite;
}
.acc-marq:hover .acc-marq__t { animation-play-state: paused; }
.acc-marq[open] .acc-marq__t {
animation: none; padding-left: 16px; color: #f0eeff;
}
@keyframes acc-marq-roll {
to { transform: translateX(-100%); }
}
.acc-marq p {
margin: 0; padding: 0 16px 14px;
font: 12px/1.55 system-ui; color: rgba(240,238,255,0.6);
}
@media (prefers-reduced-motion: reduce) {
.acc-marq__t { animation: none; padding-left: 16px; }
} .acc-marq {
margin-bottom: 6px; background: rgba(212,154,92,0.06);
border: 1px solid rgba(212,154,92,0.16); border-radius: 8px;
overflow: hidden;
}
.acc-marq summary {
cursor: pointer; list-style: none;
padding: 12px 0; overflow: hidden; position: relative;
}
.acc-marq summary::-webkit-details-marker { display: none; }
.acc-marq__t {
display: inline-block; white-space: nowrap;
font: 600 13px/1 system-ui; color: rgba(240,238,255,0.78);
padding-left: 100%;
animation: acc-marq-roll 14s linear infinite;
}
.acc-marq:hover .acc-marq__t { animation-play-state: paused; }
.acc-marq[open] .acc-marq__t {
animation: none; padding-left: 16px; color: #f0eeff;
}
@keyframes acc-marq-roll {
to { transform: translateX(-100%); }
}
.acc-marq p {
margin: 0; padding: 0 16px 14px;
font: 12px/1.55 system-ui; color: rgba(240,238,255,0.6);
}
@media (prefers-reduced-motion: reduce) {
.acc-marq__t { animation: none; padding-left: 16px; }
}More from 26 CSS Accordions — Vertical & Horizontal
Strip TabsImage RevealColor BlockNumbered SpineCurtain SlideVinyl SpineCinema ReelAurora StripDiagonal SlantStepped StairCircular ArcCode Comment
View the full collection →