26 CSS Accordions — Vertical & Horizontal

Plus / Minus Morph

A pure-CSS plus icon that morphs into a minus when the row opens — both bars are pseudo-elements.

Pure CSS MIT licensed

Plus / Minus Morph the 3rd 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-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 &lt;details&gt; 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);
}

More from 26 CSS Accordions — Vertical & Horizontal

Aurora Strip Diagonal Slant Stepped Stair Circular Arc Marquee Header Code Comment Paper Folded Equalizer Stacked Cards Holographic Slot Aurora Drift Underline Reveal

View the full collection →