26 CSS Accordions — Vertical & Horizontal 03 / 26
Plus / Minus Morph
A pure-CSS plus icon that morphs into a minus when the row opens — both bars are pseudo-elements.
The code
<details class="acc-pm" name="acc-pm"> <summary>Project setup<span class="acc-pm__ico" aria-hidden="true"></span></summary> <p>Drop the snippet into any HTML page — works with any framework or none at all.</p> </details> <details class="acc-pm" name="acc-pm" open> <summary>Browser support<span class="acc-pm__ico" aria-hidden="true"></span></summary> <p>Modern evergreen browsers. Native <details> has shipped everywhere since 2020.</p> </details> <details class="acc-pm" name="acc-pm"> <summary>Theming<span class="acc-pm__ico" aria-hidden="true"></span></summary> <p>Override --acc-pm-accent on the parent to recolor the entire group instantly.</p> </details>
<details class="acc-pm" name="acc-pm">
<summary>Project setup<span class="acc-pm__ico" aria-hidden="true"></span></summary>
<p>Drop the snippet into any HTML page — works with any framework or none at all.</p>
</details>
<details class="acc-pm" name="acc-pm" open>
<summary>Browser support<span class="acc-pm__ico" aria-hidden="true"></span></summary>
<p>Modern evergreen browsers. Native <details> has shipped everywhere since 2020.</p>
</details>
<details class="acc-pm" name="acc-pm">
<summary>Theming<span class="acc-pm__ico" aria-hidden="true"></span></summary>
<p>Override --acc-pm-accent on the parent to recolor the entire group instantly.</p>
</details>.acc-pm { --acc-pm-accent: #d49a5c;
border: 1px solid rgba(212,154,92,0.18); border-radius: 10px;
margin-bottom: 6px; overflow: hidden;
}
.acc-pm summary {
display: flex; align-items: center; justify-content: space-between;
cursor: pointer; list-style: none; padding: 13px 16px;
font: 600 13px/1.3 system-ui, sans-serif; color: rgba(240,238,255,0.78);
}
.acc-pm summary::-webkit-details-marker { display: none; }
.acc-pm__ico {
position: relative; width: 14px; height: 14px; flex-shrink: 0;
}
.acc-pm__ico::before, .acc-pm__ico::after {
content: ''; position: absolute; inset: 0; margin: auto;
background: var(--acc-pm-accent); border-radius: 1px;
transition: transform .35s cubic-bezier(.5,1.5,.5,1);
}
.acc-pm__ico::before { width: 100%; height: 2px; }
.acc-pm__ico::after { width: 2px; height: 100%; }
.acc-pm[open] .acc-pm__ico::after { transform: rotate(90deg); }
.acc-pm[open] .acc-pm__ico::before { transform: rotate(180deg); }
.acc-pm[open] { background: rgba(212,154,92,0.05); }
.acc-pm p {
margin: 0; padding: 0 16px 14px;
font: 12px/1.6 system-ui, sans-serif; color: rgba(240,238,255,0.55);
} .acc-pm { --acc-pm-accent: #d49a5c;
border: 1px solid rgba(212,154,92,0.18); border-radius: 10px;
margin-bottom: 6px; overflow: hidden;
}
.acc-pm summary {
display: flex; align-items: center; justify-content: space-between;
cursor: pointer; list-style: none; padding: 13px 16px;
font: 600 13px/1.3 system-ui, sans-serif; color: rgba(240,238,255,0.78);
}
.acc-pm summary::-webkit-details-marker { display: none; }
.acc-pm__ico {
position: relative; width: 14px; height: 14px; flex-shrink: 0;
}
.acc-pm__ico::before, .acc-pm__ico::after {
content: ''; position: absolute; inset: 0; margin: auto;
background: var(--acc-pm-accent); border-radius: 1px;
transition: transform .35s cubic-bezier(.5,1.5,.5,1);
}
.acc-pm__ico::before { width: 100%; height: 2px; }
.acc-pm__ico::after { width: 2px; height: 100%; }
.acc-pm[open] .acc-pm__ico::after { transform: rotate(90deg); }
.acc-pm[open] .acc-pm__ico::before { transform: rotate(180deg); }
.acc-pm[open] { background: rgba(212,154,92,0.05); }
.acc-pm p {
margin: 0; padding: 0 16px 14px;
font: 12px/1.6 system-ui, sans-serif; color: rgba(240,238,255,0.55);
}More from 26 CSS Accordions — Vertical & Horizontal
Aurora StripDiagonal SlantStepped StairCircular ArcMarquee HeaderCode CommentPaper FoldedEqualizerStacked CardsHolographic SlotAurora DriftUnderline Reveal
View the full collection →