26 CSS Accordions — Vertical & Horizontal

Code Comment

Accordion styled as a multi-line code comment — "//" prefix on closed rows, full block on open.

Pure CSS MIT licensed

Code Comment the 21st 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-cc" name="acc-cc">
  <summary>const installCommand = "npm i";</summary>
  <p>Installs the package and resolves all peer dependencies. Adds an entry to package.json.</p>
</details>
<details class="acc-cc" name="acc-cc" open>
  <summary>const importStatement = "import x from 'lib';";</summary>
  <p>ES module import. Tree-shakable so unused exports won't bloat the bundle.</p>
</details>
<details class="acc-cc" name="acc-cc">
  <summary>const renderHook = "useEffect";</summary>
  <p>Side-effects after paint. Cleanup runs on unmount or before the next effect fires.</p>
</details>

.acc-cc {
  font-family: ui-monospace, "JetBrains Mono", monospace;
  background: #0e0e16; border-left: 3px solid #8fb3a3;
  margin-bottom: 4px; padding: 4px 0;
}
.acc-cc summary {
  cursor: pointer; list-style: none;
  padding: 8px 14px; font-size: 12.5px;
  color: rgba(143,179,163,0.85); position: relative;
}
.acc-cc summary::-webkit-details-marker { display: none; }
.acc-cc summary::before {
  content: '// '; color: rgba(143,179,163,0.45);
}
.acc-cc[open] summary { color: #f0eeff; background: rgba(143,179,163,0.06); }
.acc-cc[open] summary::before { content: '/* '; color: #d49a5c; }
.acc-cc[open] summary::after { content: ' */'; color: #d49a5c; }
.acc-cc p {
  margin: 0; padding: 8px 14px 12px 28px;
  font: 11.5px/1.7 ui-monospace, monospace;
  color: rgba(240,238,255,0.6);
}
.acc-cc p::before {
  content: '→ '; color: #d49a5c;
}

More from 26 CSS Accordions — Vertical & Horizontal

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

View the full collection →