Smooth accordion

<div class="accordion" data-single-open>
  <details>
    <summary>Do I need a framework?</summary>
    <div class="accordion-body"><p>No. Every widget here is plain HTML, CSS and JavaScript you can paste into any project.</p></div>
  </details>
  <details>
    <summary>Does it work without JavaScript?</summary>
    <div class="accordion-body"><p>Yes. It's built on the native details element, so it opens and closes even if the script never loads.</p></div>
  </details>
  <details>
    <summary>Is it accessible?</summary>
    <div class="accordion-body"><p>The browser gives details/summary keyboard support and the right semantics for free.</p></div>
  </details>
</div>

.accordion {
  width: min(440px, 100%);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  font: 15px/1.5 system-ui, sans-serif;
}
.accordion details + details { border-top: 1px solid var(--line); }

.accordion summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 15px 18px;
  cursor: pointer;
  font-weight: 600;
  list-style: none;        /* hide the default triangle... */
}
.accordion summary::-webkit-details-marker { display: none; }
/* ...and draw a plus that turns into a minus. */
.accordion summary::after {
  content: '+';
  font: 400 20px/1 system-ui, sans-serif;
  color: var(--muted);
  transition: transform 0.25s;
}
.accordion details[open] summary::after { transform: rotate(45deg); }
.accordion summary:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

.accordion-body { overflow: hidden; }
.accordion-body p { margin: 0; padding: 0 18px 16px; color: var(--muted); }

// Smooth accordion: native <details> elements open instantly, so we animate
// the height of the body ourselves. Without JavaScript, they still work.

const prefersReducedMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
const animationTime = prefersReducedMotion ? 120 : 260; // ms; quicker with reduced motion

function animateHeight(element, fromHeight, toHeight) {
  return element.animate(
    [{ height: `${fromHeight}px` }, { height: `${toHeight}px` }],
    { duration: animationTime, easing: 'cubic-bezier(0.22, 1, 0.36, 1)' },
  ).finished;
}

async function openItem(details) {
  const body = details.querySelector('.accordion-body');
  details.open = true; // render the content so we can measure it
  await animateHeight(body, 0, body.scrollHeight);
}

async function closeItem(details) {
  const body = details.querySelector('.accordion-body');
  await animateHeight(body, body.scrollHeight, 0);
  details.open = false; // only close once the animation has finished
}

document.querySelectorAll('.accordion').forEach((accordion) => {
  const items = [...accordion.querySelectorAll('details')];
  const singleOpen = accordion.hasAttribute('data-single-open');

  for (const details of items) {
    details.querySelector('summary').addEventListener('click', (event) => {
      event.preventDefault(); // we decide when `open` changes, so we can animate
      if (details.open) {
        closeItem(details);
      } else {
        if (singleOpen) items.filter((other) => other !== details && other.open).forEach(closeItem);
        openItem(details);
      }
    });
  }
});