Accordion Card

A dark, refined vertical accordion where clicking an item expands its answer and collapses the others.

Best forFAQs, documentation, and detail panels.

CSS + JS MIT licensed

The code

<div class="scd-acc">
  <div class="scd-acc__stage" data-scd-acc="stage">
    <div class="scd-acc__item scd-acc__item--open"><div class="scd-acc__head">What is included?<span class="scd-acc__plus">+</span></div><div class="scd-acc__body">Every tier ships with the full source, lifetime updates, and priority support from our team.</div></div>
    <div class="scd-acc__item"><div class="scd-acc__head">Can I use it commercially?<span class="scd-acc__plus">+</span></div><div class="scd-acc__body">Yes &mdash; the license covers unlimited commercial projects with no attribution required.</div></div>
    <div class="scd-acc__item"><div class="scd-acc__head">Is there a refund?<span class="scd-acc__plus">+</span></div><div class="scd-acc__body">A 30-day no-questions money-back guarantee applies to all purchases.</div></div>
  </div>
</div>

<div class="scd-acc">
  <div class="scd-acc__stage" data-scd-acc="stage">
    <div class="scd-acc__item scd-acc__item--open"><div class="scd-acc__head">What is included?<span class="scd-acc__plus">+</span></div><div class="scd-acc__body">Every tier ships with the full source, lifetime updates, and priority support from our team.</div></div>
    <div class="scd-acc__item"><div class="scd-acc__head">Can I use it commercially?<span class="scd-acc__plus">+</span></div><div class="scd-acc__body">Yes &mdash; the license covers unlimited commercial projects with no attribution required.</div></div>
    <div class="scd-acc__item"><div class="scd-acc__head">Is there a refund?<span class="scd-acc__plus">+</span></div><div class="scd-acc__body">A 30-day no-questions money-back guarantee applies to all purchases.</div></div>
  </div>
</div>

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,[email protected],600&family=Newsreader:wght@400&display=swap');

.scd-acc, .scd-acc *, .scd-acc *::before, .scd-acc *::after { box-sizing: border-box; margin: 0; padding: 0; }

.scd-acc {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: #1a1714;
  font-family: 'Newsreader', serif;
}
.scd-acc__stage { width: 320px; }
.scd-acc__item {
  background: linear-gradient(135deg,#2c2722,#231e1a);
  border: 1px solid #3d362f;
  border-radius: 14px;
  margin-bottom: 8px;
  overflow: hidden;
  transition: margin .4s;
  cursor: pointer;
}
.scd-acc__head {
  padding: 18px 22px;
  display: flex; justify-content: space-between; align-items: center;
  color: #f0e6d6;
  font-family: 'Fraunces', serif; font-size: 1.05rem;
}
.scd-acc__plus { transition: transform .4s; color: #c89b5a; font-size: 1.3rem; }
.scd-acc__body {
  max-height: 0; overflow: hidden;
  transition: max-height .5s cubic-bezier(.3,.9,.3,1);
  padding: 0 22px;
  color: #bcae9c; line-height: 1.6; font-size: .9rem;
}
.scd-acc__item--open { margin: 14px 0; background: linear-gradient(135deg,#3a3128,#2c241c); }
.scd-acc__item--open .scd-acc__body { max-height: 120px; padding: 0 22px 20px; }
.scd-acc__item--open .scd-acc__plus { transform: rotate(45deg); }

@media (prefers-reduced-motion: reduce) {
  .scd-acc__item, .scd-acc__plus, .scd-acc__body { transition: none !important; }
}

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,[email protected],600&family=Newsreader:wght@400&display=swap');

.scd-acc, .scd-acc *, .scd-acc *::before, .scd-acc *::after { box-sizing: border-box; margin: 0; padding: 0; }

.scd-acc {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: #1a1714;
  font-family: 'Newsreader', serif;
}
.scd-acc__stage { width: 320px; }
.scd-acc__item {
  background: linear-gradient(135deg,#2c2722,#231e1a);
  border: 1px solid #3d362f;
  border-radius: 14px;
  margin-bottom: 8px;
  overflow: hidden;
  transition: margin .4s;
  cursor: pointer;
}
.scd-acc__head {
  padding: 18px 22px;
  display: flex; justify-content: space-between; align-items: center;
  color: #f0e6d6;
  font-family: 'Fraunces', serif; font-size: 1.05rem;
}
.scd-acc__plus { transition: transform .4s; color: #c89b5a; font-size: 1.3rem; }
.scd-acc__body {
  max-height: 0; overflow: hidden;
  transition: max-height .5s cubic-bezier(.3,.9,.3,1);
  padding: 0 22px;
  color: #bcae9c; line-height: 1.6; font-size: .9rem;
}
.scd-acc__item--open { margin: 14px 0; background: linear-gradient(135deg,#3a3128,#2c241c); }
.scd-acc__item--open .scd-acc__body { max-height: 120px; padding: 0 22px 20px; }
.scd-acc__item--open .scd-acc__plus { transform: rotate(45deg); }

@media (prefers-reduced-motion: reduce) {
  .scd-acc__item, .scd-acc__plus, .scd-acc__body { transition: none !important; }
}

(() => {
  const root = document.querySelector('.scd-acc');
  if (!root) return;
  const acc = root.querySelector('[data-scd-acc="stage"]');
  if (!acc) return;

  acc.querySelectorAll('.scd-acc__item').forEach((it) => {
    it.addEventListener('click', () => {
      const wasOpen = it.classList.contains('scd-acc__item--open');
      acc.querySelectorAll('.scd-acc__item').forEach((x) => x.classList.remove('scd-acc__item--open'));
      if (!wasOpen) it.classList.add('scd-acc__item--open');
    });
  });
})();

(() => {
  const root = document.querySelector('.scd-acc');
  if (!root) return;
  const acc = root.querySelector('[data-scd-acc="stage"]');
  if (!acc) return;

  acc.querySelectorAll('.scd-acc__item').forEach((it) => {
    it.addEventListener('click', () => {
      const wasOpen = it.classList.contains('scd-acc__item--open');
      acc.querySelectorAll('.scd-acc__item').forEach((x) => x.classList.remove('scd-acc__item--open'));
      if (!wasOpen) it.classList.add('scd-acc__item--open');
    });
  });
})();

More from 28 CSS Stacked Card Designs

Notification Pile Receipt Roll Scroll-Activated Stacked Cards (Sticky Stack)Swipeable / Click-to-Front Stacked Cards Shuffle Reveal Swipe Stack 3D Flip Stack Tilt on Hover Scratch Cards CSS Stacked Cards Hover Reveal Pure CSS Stacked Card Testimonial Slider 3D Overlapping Stacked Cards (Isometric View)

View the full collection →