Collapsible Modules

Expandable sections for organizing grouped content.

Basic Module

<div class="sw-module expanded">
  <div class="sw-module-header" onclick="this.parentElement.classList.toggle('expanded')">
    <div class="sw-module-title">
      <span class="sw-module-icon">...</span>
      Focus Groups
    </div>
    <svg class="sw-module-chevron">...</svg>
  </div>
  <div class="sw-module-content">
    Content here...
  </div>
</div>

States

CSS

.sw-module {
  border-bottom: 1px solid var(--sw-border-default);
}

.sw-module-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sw-space-3) var(--sw-space-4);
  cursor: pointer;
  transition: background var(--sw-transition-fast);
}

.sw-module-header:hover {
  background: var(--sw-bg-hover);
}

.sw-module-title {
  display: flex;
  align-items: center;
  gap: var(--sw-space-2);
  font-size: var(--sw-text-sm);
  font-weight: var(--sw-font-medium);
  color: var(--sw-text-primary);
}

.sw-module-icon {
  color: var(--sw-text-tertiary);
}

.sw-module-chevron {
  color: var(--sw-text-tertiary);
  transition: transform var(--sw-transition-fast);
}

.sw-module.expanded .sw-module-chevron {
  transform: rotate(180deg);
}

.sw-module-content {
  display: none;
  padding: 0 var(--sw-space-4) var(--sw-space-4);
}

.sw-module.expanded .sw-module-content {
  display: block;
}