26 CSS Accordions — Vertical & Horizontal

Chevron Rotate

A pure-CSS chevron arrow rotates 180° on open — built from a single bordered square.

Pure CSS MIT licensed

Chevron Rotate the 4th 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-chv" name="acc-chv">
  <summary>How long does setup take?<span class="acc-chv__ico" aria-hidden="true"></span></summary>
  <p>Under five minutes. Copy the markup, paste the styles, you're done.</p>
</details>
<details class="acc-chv" name="acc-chv" open>
  <summary>
    Can I use this commercially?<span class="acc-chv__ico" aria-hidden="true"></span>
  </summary>
  <p>Yes — MIT licensed. Use it in client work, products, anywhere.</p>
</details>
<details class="acc-chv" name="acc-chv">
  <summary>Is there a Figma version?<span class="acc-chv__ico" aria-hidden="true"></span></summary>
  <p>Not yet. Designs live in code as the source of truth.</p>
</details>

.acc-chv {
  border-bottom: 1px solid rgba(143,179,163,0.18); padding: 4px 0;
}
.acc-chv summary {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; list-style: none; padding: 14px 4px;
  font: 600 13px/1.3 system-ui, sans-serif; color: rgba(240,238,255,0.7);
  transition: color .2s;
}
.acc-chv summary::-webkit-details-marker { display: none; }
.acc-chv summary:hover { color: #f0eeff; }
.acc-chv__ico {
  width: 9px; height: 9px;
  border-right: 2px solid #8fb3a3;
  border-bottom: 2px solid #8fb3a3;
  transform: rotate(45deg) translate(-2px,-2px);
  transition: transform .35s cubic-bezier(.4,1.4,.5,1);
  flex-shrink: 0;
}
.acc-chv[open] > summary { color: #f0eeff; }
.acc-chv[open] .acc-chv__ico {
  transform: rotate(225deg) translate(-2px,-2px);
}
.acc-chv p {
  margin: 0 0 12px; padding: 0 4px;
  font: 12px/1.6 system-ui, sans-serif; color: rgba(240,238,255,0.55);
}

More from 26 CSS Accordions — Vertical & Horizontal

Equalizer Stacked Cards Holographic Slot Aurora Drift Underline Reveal Numbered Steps Plus / Minus Morph Brutalist Stamp Glass Frosted Minimal Rail Card Lift Strip Tabs

View the full collection →