26 CSS Accordions — Vertical & Horizontal

Marquee Header

Closed rows scroll their title as a slow marquee; opening pauses the marquee and reveals body.

Pure CSS MIT licensed

Marquee Header the 20th 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

Open in playground

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 ·&nbsp;</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 ·&nbsp;</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 ·&nbsp;</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; }
}

More from 26 CSS Accordions — Vertical & Horizontal

Strip Tabs Image Reveal Color Block Numbered Spine Curtain Slide Vinyl Spine Cinema Reel Aurora Strip Diagonal Slant Stepped Stair Circular Arc Code Comment

View the full collection →