12 CSS Code Blocks 12 / 12

Expandable / Collapsible Code Wrapper

A long code snippet capped with <code>max-height</code> + <code>overflow: hidden</code> and a <code>linear-gradient(transparent, bg)</code> fade mask at the bottom hinting at more content.

Best fordocumentation pages with long source listings, FAQ answers that embed code, blog posts where the snippet is reference material rather than the focus, and any place a long block of code would otherwise dominate the page above the fold.

Pure CSS MIT licensed
Live Demo Open in tab
Open in playground

The code

<section class="ccb-exp" aria-label="Expandable collapsible code wrapper demo">
  <div class="ccb-exp__wrap">
    <div class="ccb-exp__block">
      <div class="ccb-exp__head">utils/animate.js <span class="ccb-exp__lines">142 lines</span></div>
      <input type="checkbox" id="ccb-exp-toggle" class="ccb-exp__toggle" aria-label="Expand or collapse code">
      <div class="ccb-exp__codewrap">
        <pre class="ccb-exp__pre"><code><span class="ccb-exp__c">// easing + tween helpers</span>
<span class="ccb-exp__k">export const</span> <span class="ccb-exp__f">easeOutCubic</span> = t =&gt; <span class="ccb-exp__n">1</span> - Math.<span class="ccb-exp__f">pow</span>(<span class="ccb-exp__n">1</span> - t, <span class="ccb-exp__n">3</span>);
<span class="ccb-exp__k">export const</span> <span class="ccb-exp__f">easeInOut</span> = t =&gt; t &lt; .5
  ? <span class="ccb-exp__n">4</span> * t * t * t
  : <span class="ccb-exp__n">1</span> - Math.<span class="ccb-exp__f">pow</span>(-<span class="ccb-exp__n">2</span> * t + <span class="ccb-exp__n">2</span>, <span class="ccb-exp__n">3</span>) / <span class="ccb-exp__n">2</span>;

<span class="ccb-exp__k">export function</span> <span class="ccb-exp__f">tween</span>({ from, to, duration, onUpdate }) {
  <span class="ccb-exp__k">const</span> start = performance.<span class="ccb-exp__f">now</span>();
  <span class="ccb-exp__k">function</span> <span class="ccb-exp__f">frame</span>(now) {
    <span class="ccb-exp__k">const</span> p = Math.<span class="ccb-exp__f">min</span>((now - start) / duration, <span class="ccb-exp__n">1</span>);
    <span class="ccb-exp__f">onUpdate</span>(from + (to - from) * <span class="ccb-exp__f">easeOutCubic</span>(p));
    <span class="ccb-exp__k">if</span> (p &lt; <span class="ccb-exp__n">1</span>) <span class="ccb-exp__f">requestAnimationFrame</span>(frame);
  }
  <span class="ccb-exp__f">requestAnimationFrame</span>(frame);
}

<span class="ccb-exp__k">export function</span> <span class="ccb-exp__f">stagger</span>(items, delay = <span class="ccb-exp__n">60</span>) {
  items.<span class="ccb-exp__f">forEach</span>((el, i) =&gt; {
    el.style.<span class="ccb-exp__p">animationDelay</span> = <span class="ccb-exp__s">`${i * delay}ms`</span>;
  });
}</code></pre>
        <div class="ccb-exp__fade" aria-hidden="true"></div>
      </div>
      <label for="ccb-exp-toggle" class="ccb-exp__btn"><span class="ccb-exp__more">Show more</span><span class="ccb-exp__less">Show less</span></label>
    </div>
  </div>
</section>
/* ─── 12 Expandable / Collapsible Code Wrapper ──────── */
@import url('https://fonts.googleapis.com/css2?family=Martian+Mono:wght@400;500;600&family=Space+Grotesk:wght@400;600;700&display=swap');

.ccb-exp {
  --ccb-exp-bg: #0c0e13;
  --ccb-exp-panel: #13161d;
  --ccb-exp-ink: #dfe4ec;
  --ccb-exp-muted: #79828f;
  --ccb-exp-accent: #34d399;
  --ccb-exp-line: rgba(255,255,255,.06);

  width: 100%;
  min-height: 360px;
  background:
    radial-gradient(640px 360px at 0% 0%, rgba(52,211,153,.09), transparent 55%),
    var(--ccb-exp-bg);
  color: var(--ccb-exp-ink);
  font-family: 'Space Grotesk', sans-serif;
  display: flex; align-items: center; justify-content: center;
  padding: 36px 22px;
  box-sizing: border-box;
}
.ccb-exp *, .ccb-exp *::before, .ccb-exp *::after { box-sizing: border-box; }

.ccb-exp__wrap { width: 100%; max-width: 600px; }
.ccb-exp__block {
  background: var(--ccb-exp-panel);
  border: 1px solid var(--ccb-exp-line);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 24px 60px -30px rgba(0,0,0,.85);
}
.ccb-exp__head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--ccb-exp-line);
  font-family: 'Martian Mono', monospace;
  font-size: 11.5px; color: var(--ccb-exp-muted); letter-spacing: .04em;
}
.ccb-exp__lines { margin-left: auto; color: var(--ccb-exp-accent); }

.ccb-exp__toggle { display: none; }
.ccb-exp__codewrap { position: relative; }
.ccb-exp__pre {
  margin: 0; padding: 20px 20px;
  font-family: 'Martian Mono', monospace;
  font-size: 12px; line-height: 1.95;
  color: #cbd3df; overflow: hidden;
  max-height: 170px;
  transition: max-height .45s cubic-bezier(.4,0,.2,1);
}
.ccb-exp__toggle:checked ~ .ccb-exp__codewrap .ccb-exp__pre { max-height: 1200px; }

.ccb-exp__fade {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 80px;
  pointer-events: none;
  background: linear-gradient(transparent, var(--ccb-exp-panel));
  transition: opacity .3s;
}
.ccb-exp__toggle:checked ~ .ccb-exp__codewrap .ccb-exp__fade { opacity: 0; }

.ccb-exp__btn {
  display: block; width: 100%; text-align: center; cursor: pointer;
  padding: 13px;
  font-family: 'Martian Mono', monospace;
  font-size: 11.5px; letter-spacing: .08em;
  color: var(--ccb-exp-accent);
  background: rgba(52,211,153,.06);
  border-top: 1px solid var(--ccb-exp-line);
  user-select: none;
  transition: background .2s;
}
.ccb-exp__btn:hover { background: rgba(52,211,153,.12); }
.ccb-exp__btn .ccb-exp__more { display: inline; }
.ccb-exp__btn .ccb-exp__less { display: none; }
.ccb-exp__toggle:checked ~ .ccb-exp__btn .ccb-exp__more { display: none; }
.ccb-exp__toggle:checked ~ .ccb-exp__btn .ccb-exp__less { display: inline; }
.ccb-exp__btn::after {
  content: ' \25BE';
  display: inline-block;
  transition: transform .3s;
}
.ccb-exp__toggle:checked ~ .ccb-exp__btn::after { transform: rotate(180deg); }
.ccb-exp__toggle:focus-visible ~ .ccb-exp__btn { outline: 2px solid var(--ccb-exp-accent); outline-offset: -3px; }

.ccb-exp__k { color: #c792ea; }
.ccb-exp__f { color: #82aaff; }
.ccb-exp__s { color: #c3e88d; }
.ccb-exp__c { color: #586173; font-style: italic; }
.ccb-exp__p { color: #7dd3fc; }
.ccb-exp__n { color: #ffb86c; }
.ccb-exp__pre::-webkit-scrollbar       { height: 8px; }
.ccb-exp__pre::-webkit-scrollbar-thumb { background: #262b34; border-radius: 8px; }

@media (prefers-reduced-motion: reduce) {
  .ccb-exp__pre, .ccb-exp__fade, .ccb-exp__btn::after, .ccb-exp__btn { transition: none; }
}

More from 12 CSS Code Blocks

Minimalist Dark Mode Code BoxMac-Style Window ContainerCode Container with Line Numbers and Filename HeaderHorizontal Scroll & Word-Wrap Handling (Mobile Responsive)Glow-Effect & Neon Tech Code BlockGlassmorphism Code TerminalInline Code Snippet Pill StylingNeumorphic Embedded Code BoxSplit-Pane Code + Live Preview ContainerMinimalist Light Mode / Editorial ThemeCode Block with Copy to Clipboard Button
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →