Collapsible Card

<div class="nuda-collapse-card">
  <button class="nuda-collapse-card__header" aria-expanded="true">
    <span>Card Title</span>
    <span class="nuda-collapse-card__chevron">&#9660;</span>
  </button>
  <div class="nuda-collapse-card__body">
    <p>Card content goes here. Click the header to toggle.</p>
  </div>
</div>

/* Collapsible Card
   Card with animated expand/collapse body.
   Customize: --collapse-accent */

.nuda-collapse-card {
  --collapse-accent: #e4ff54;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  overflow: hidden;
  max-width: 400px;
}

.nuda-collapse-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0.85rem 1rem;
  background: none;
  border: none;
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
}

.nuda-collapse-card__chevron {
  font-size: 0.75rem;
  color: var(--collapse-accent);
  transition: transform 0.3s ease;
}

.nuda-collapse-card[aria-collapsed="true"] .nuda-collapse-card__chevron {
  transform: rotate(-180deg);
}

.nuda-collapse-card__body {
  padding: 0 1rem 1rem;
  color: #999;
  font-size: 0.85rem;
  overflow: hidden;
  max-height: 200px;
  transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.35s ease;
}

.nuda-collapse-card.is-collapsed .nuda-collapse-card__body {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  .nuda-collapse-card__body,
  .nuda-collapse-card__chevron {
    transition: none;
  }
}

/* Collapsible Card — Toggle collapse */

(function () {
  var cards = document.querySelectorAll('.nuda-collapse-card');
  cards.forEach(function (card) {
    var header = card.querySelector('.nuda-collapse-card__header');
    if (!header) return;

    header.addEventListener('click', function () {
      var isCollapsed = card.classList.toggle('is-collapsed');
      header.setAttribute('aria-expanded', String(!isCollapsed));
    });
  });
})();