26 CSS Accordions — Vertical & Horizontal 04 / 26
Chevron Rotate
A pure-CSS chevron arrow rotates 180° on open — built from a single bordered square.
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> <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);
} .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
EqualizerStacked CardsHolographic SlotAurora DriftUnderline RevealNumbered StepsPlus / Minus MorphBrutalist StampGlass FrostedMinimal RailCard LiftStrip Tabs
View the full collection →