32 CSS Accordions — Vertical & Horizontal
14 / 32

All 32 in 32 CSS Accordions — Vertical & Horizontal

  1. 01Pure CSS FAQ Accordion with <details> and <summary> (No JavaScript)
  2. 02Mobile Navigation Accordion Menu (CSS-Only Hamburger + Drill-Down)
  3. 03E-commerce Filter Sidebar Accordion with Exclusive Open (Product Filters)
  4. 04Nested Multi-Level Accordion (CSS Tree View for Docs & File Explorers)
  5. 05Smoothly Animated <details> Accordion — Transition height: auto in Pure CSS
  6. 06Exclusive Single-Open Accordion with the details name Attribute (Close Others Automatically)
  7. 07Underline Reveal Accordion — Editorial Minimal with Animated Rules
  8. 08Numbered Steps Accordion — Process Timeline for Onboarding Flows
  9. 09Plus / Minus Morph Accordion — CSS-Drawn Icon Animation
  10. 10Chevron Rotate Card Accordion — The Production Default, Perfected
  11. 11Brutalist Stamp Accordion — Bold Borders, Hard Shadows, Zero Subtlety
  12. 12Glassmorphism Frosted Accordion with backdrop-filter Blur
  13. 13Minimal Rail Accordion — Timeline Dot Spine for Changelogs & Roadmaps
  14. 14Card Lift Accordion — Elevation & Scale on Open (Material-Style Depth)
  15. 15Diagonal Slant Accordion — Skewed Parallelogram Headers
  16. 16Stepped Stair Accordion — Indented Cascade with Depth Levels
  17. 17Circular Dial Accordion — Conic-Gradient Progress Ring Toggles
  18. 18Marquee Header Accordion — Scrolling Ticker Titles on the Open Item
  19. 19Code Comment Accordion — Editor-Themed Collapsible Doc Blocks
  20. 20Paper Fold 3D Accordion — perspective + rotateX Unfolding Panels
  21. 21Equalizer Accordion — Animated Level Bars for Playlists & Audio
  22. 22Stacked Cards Deck Accordion — Overlapping Pull-Out Hand
  23. 23Holographic Slot Accordion — @property Rotating Border Sheen
  24. 24Aurora Drift Accordion — Dark Ambient Glow that Follows the Open Item
  25. 25Horizontal Strip Tabs Accordion — Vertical Text Columns with flex-grow
  26. 26Horizontal Image Reveal Accordion — Expanding Photo Gallery Panels
  27. 27Color Block Horizontal Accordion — Bold Flat Panels for Feature Sections
  28. 28Numbered Spine Horizontal Accordion — Editorial Magazine Index
  29. 29Curtain Slide Horizontal Accordion — clip-path Reveal Panels
  30. 30Vinyl Spine Horizontal Accordion — Record Shelf with Pull-Out Sleeves
  31. 31Cinema Reel Horizontal Accordion — Dark Letterboxed Showcase
  32. 32Aurora Strip Horizontal Accordion — Animated Gradient Glow Panels
Pure CSSMIT licensed

Card Lift Accordion — Elevation & Scale on Open (Material-Style Depth)

Depth as state: closed items are flat, flush cards; the open item lifts toward you — scaling to 102%, growing a layered soft shadow and pushing neighbors away with extra margin. The material-design 'picked up paper' metaphor, tuned so elevation alone tells you what's active from across the room.

Live Demo
Plain CSSTailwind v4
Try it

Build interactive UI like this from scratch: 20 HTML, CSS & JavaScript projects

ZTM · JavaScript Web Projects · 30‑day money-back guarantee · Affiliate link

10% off at checkout with code
Check ZTM Course

The code

<section class="acc-14" aria-label="Card lift elevation accordion demo">
  <div class="acc-14__wrap">
    <h3 class="acc-14__title">Choose your plan</h3>
    <details class="acc-14__item" name="acc-14-plans" open>
      <summary class="acc-14__sum"><span class="acc-14__plan">Starter<small>For solo builders</small></span><span class="acc-14__price">$0</span></summary>
      <div class="acc-14__body"><p>3 projects · community support · 1GB storage. Everything you need to ship a side project tonight.</p></div>
    </details>
    <details class="acc-14__item" name="acc-14-plans">
      <summary class="acc-14__sum"><span class="acc-14__plan">Pro<small>For growing teams</small></span><span class="acc-14__price">$24<em>/mo</em></span></summary>
      <div class="acc-14__body"><p>Unlimited projects · priority support · 100GB storage · staging environments and preview deploys for every branch.</p></div>
    </details>
    <details class="acc-14__item" name="acc-14-plans">
      <summary class="acc-14__sum"><span class="acc-14__plan">Scale<small>For companies</small></span><span class="acc-14__price">Custom</span></summary>
      <div class="acc-14__body"><p>SSO/SAML · audit logs · dedicated support with a 4-hour SLA · invoicing and procurement-friendly paperwork.</p></div>
    </details>
  </div>
</section>
.acc-14,
.acc-14 *,
.acc-14 *::before,
.acc-14 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.acc-14 {
  --accent: oklch(0.6 0.17 45);
  font-family: 'Segoe UI',system-ui,sans-serif;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f3f1ee;
  padding: 44px 24px;
}

.acc-14__wrap {
  width: min(540px,100%);
}

.acc-14__title {
  font-size: 25px;
  font-weight: 800;
  color: #241f19;
  letter-spacing: -.02em;
  margin-bottom: 18px;
}

.acc-14__item {
  background: #fbfaf8;
  border: 1px solid #e7e2da;
  border-radius: 16px;
  margin: 0 0 8px;
  border-top: 3px solid transparent;
  transition: scale .35s cubic-bezier(.3,1.2,.4,1),box-shadow .35s,margin .35s,background .25s,border-color .25s;
}

.acc-14__item[open] {
  background: #fff;
  scale: 1.02;
  margin: 14px 0;
  border-top-color: var(--accent);
  box-shadow: 0 2px 6px -2px rgba(40,30,15,.18),0 24px 50px -20px rgba(40,30,15,.28);
}

.acc-14__sum {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 66px;
  padding: 10px 22px;
  cursor: pointer;
}

.acc-14__sum::-webkit-details-marker {
  display: none;
}

.acc-14__sum::marker {
  content: "";
}

.acc-14__plan {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 17px;
  font-weight: 750;
  color: #241f19;
}

.acc-14__plan small {
  font-size: 12.5px;
  font-weight: 500;
  color: #8b8172;
}

.acc-14__price {
  margin-left: auto;
  font-size: 20px;
  font-weight: 800;
  color: #241f19;
}

.acc-14__price em {
  font-style: normal;
  font-size: 12.5px;
  font-weight: 600;
  color: #8b8172;
}

.acc-14__item[open] .acc-14__price {
  color: var(--accent);
}

.acc-14__body {
  padding: 0 22px 20px;
  font-size: 14.5px;
  line-height: 1.65;
  color: #57503f;
}

.acc-14__item[open] .acc-14__body {
  animation: acc-14-in .4s cubic-bezier(.2,.7,.3,1);
}

@keyframes acc-14-in {
  from {
    opacity: 0;
    translate: 0 -6px;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

.acc-14__sum:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .acc-14__item {
    transition: background .25s;
  }

  .acc-14__item[open] {
    scale: 1;
    margin: 0 0 8px;
  }

  .acc-14__item[open] .acc-14__body {
    animation: none;
  }
}
/* No JavaScript — details[open] applies scale:1.02, a two-layer contact+ambient shadow and clearance margins; closed cards stay deliberately flat so elevation alone marks the active item. */
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Accordions — Vertical & Horizontal from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Card Lift Accordion — Elevation & Scale on Open (Material-Style Depth)
Source: https://codefronts.com/navigation/css-accordions/card-lift/

Depth as state: closed items are flat, flush cards; the open item lifts toward you — scaling to 102%, growing a layered soft shadow and pushing neighbors away with extra margin. The material-design 'picked up paper' metaphor, tuned so elevation alone tells you what's active from across the room.
## HTML
```html
<section class="acc-14" aria-label="Card lift elevation accordion demo">
  <div class="acc-14__wrap">
    <h3 class="acc-14__title">Choose your plan</h3>
    <details class="acc-14__item" name="acc-14-plans" open>
      <summary class="acc-14__sum"><span class="acc-14__plan">Starter<small>For solo builders</small></span><span class="acc-14__price">$0</span></summary>
      <div class="acc-14__body"><p>3 projects · community support · 1GB storage. Everything you need to ship a side project tonight.</p></div>
    </details>
    <details class="acc-14__item" name="acc-14-plans">
      <summary class="acc-14__sum"><span class="acc-14__plan">Pro<small>For growing teams</small></span><span class="acc-14__price">$24<em>/mo</em></span></summary>
      <div class="acc-14__body"><p>Unlimited projects · priority support · 100GB storage · staging environments and preview deploys for every branch.</p></div>
    </details>
    <details class="acc-14__item" name="acc-14-plans">
      <summary class="acc-14__sum"><span class="acc-14__plan">Scale<small>For companies</small></span><span class="acc-14__price">Custom</span></summary>
      <div class="acc-14__body"><p>SSO/SAML · audit logs · dedicated support with a 4-hour SLA · invoicing and procurement-friendly paperwork.</p></div>
    </details>
  </div>
</section>
```
## CSS
```css
.acc-14,
.acc-14 *,
.acc-14 *::before,
.acc-14 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.acc-14 {
  --accent: oklch(0.6 0.17 45);
  font-family: 'Segoe UI',system-ui,sans-serif;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f3f1ee;
  padding: 44px 24px;
}

.acc-14__wrap {
  width: min(540px,100%);
}

.acc-14__title {
  font-size: 25px;
  font-weight: 800;
  color: #241f19;
  letter-spacing: -.02em;
  margin-bottom: 18px;
}

.acc-14__item {
  background: #fbfaf8;
  border: 1px solid #e7e2da;
  border-radius: 16px;
  margin: 0 0 8px;
  border-top: 3px solid transparent;
  transition: scale .35s cubic-bezier(.3,1.2,.4,1),box-shadow .35s,margin .35s,background .25s,border-color .25s;
}

.acc-14__item[open] {
  background: #fff;
  scale: 1.02;
  margin: 14px 0;
  border-top-color: var(--accent);
  box-shadow: 0 2px 6px -2px rgba(40,30,15,.18),0 24px 50px -20px rgba(40,30,15,.28);
}

.acc-14__sum {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 66px;
  padding: 10px 22px;
  cursor: pointer;
}

.acc-14__sum::-webkit-details-marker {
  display: none;
}

.acc-14__sum::marker {
  content: "";
}

.acc-14__plan {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 17px;
  font-weight: 750;
  color: #241f19;
}

.acc-14__plan small {
  font-size: 12.5px;
  font-weight: 500;
  color: #8b8172;
}

.acc-14__price {
  margin-left: auto;
  font-size: 20px;
  font-weight: 800;
  color: #241f19;
}

.acc-14__price em {
  font-style: normal;
  font-size: 12.5px;
  font-weight: 600;
  color: #8b8172;
}

.acc-14__item[open] .acc-14__price {
  color: var(--accent);
}

.acc-14__body {
  padding: 0 22px 20px;
  font-size: 14.5px;
  line-height: 1.65;
  color: #57503f;
}

.acc-14__item[open] .acc-14__body {
  animation: acc-14-in .4s cubic-bezier(.2,.7,.3,1);
}

@keyframes acc-14-in {
  from {
    opacity: 0;
    translate: 0 -6px;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

.acc-14__sum:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .acc-14__item {
    transition: background .25s;
  }

  .acc-14__item[open] {
    scale: 1;
    margin: 0 0 8px;
  }

  .acc-14__item[open] .acc-14__body {
    animation: none;
  }
}
```

## JavaScript
```js
/* No JavaScript — details[open] applies scale:1.02, a two-layer contact+ambient shadow and clearance margins; closed cards stay deliberately flat so elevation alone marks the active item. */
```

How this works

Three properties animate together on [open]: scale: 1.02 (the card physically comes closer), a two-layer shadow (a tight dark contact shadow + a wide soft ambient one — the pair is what makes elevation read as real light), and vertical margins that push neighbors back, as if the lifted card needs clearance. All three are cheap: scale and shadow composite, margin animates layout only between two items.

Closed cards are deliberately shadowless and share a flat background, so the elevation delta is maximal — depth systems fail when everything floats a little. An accent top-border fades in on the lifted card as a color echo. The scale uses the individual scale: property so the icon's own transforms stay independent.

Techniques used: two-layer shadow (contact + ambient) for believable elevation · individual scale: property on open · neighbor-clearance margin animation · flat-at-rest discipline (shadow only when lifted) · accent top-border echo

Make it yours

  • Lift amount = the scale value + shadow sizes (keep the ratio).
  • Clearance = the open margins (10px here).
  • Turn OFF scale and keep shadows for a subtler professional build.
  • Accent border: swap for a left border or remove entirely.

Gotchas — read before shipping

  • Two shadows or it looks fake: one tight low-alpha contact shadow + one wide soft ambient — a single big blur reads as glow, not lift.
  • Scale >1.03 makes text visibly resize and neighbors jump — keep it micro.
  • Don't leave resting shadows on closed cards; elevation is only meaningful as a DIFFERENCE.
  • scale: on a card containing focused inputs can blur text mid-transition in some browsers — this demo has none, but avoid the pattern around forms.

Browser support

ChromeSafariFirefoxEdge
111+15.4+113+111+

Floor set by oklch() as this demo is written. The core technique itself goes back further — Chrome 104+ (scale:).

Individual transform properties are baseline 2022; substitute transform:scale() for legacy reach.

Techniques used in this demo

<details name="">MDN ↗@keyframesMDN ↗:focus-visibleMDN ↗box-shadowMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →