26 CSS Accordions — Vertical & Horizontal 21 / 26
Code Comment
Accordion styled as a multi-line code comment — "//" prefix on closed rows, full block on open.
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>
<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;
} .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 StripDiagonal SlantStepped StairCircular ArcMarquee HeaderPaper FoldedEqualizerStacked CardsHolographic SlotAurora DriftUnderline RevealNumbered Steps
View the full collection →