Accordion

Collapsible list built on native <details> / <summary>. Works with server rendering alone — no JavaScript required — and keyboard accessibility is handled by the browser automatically. The system ships two variants: .faq-accfor Q&A and .vendor-acc for vendor details.

FAQ Accordion

Collapsible Q&A. The summary is 18px / 800 weight with a .faq-icon chevron (›→⌄) on the right. The answer .faq-answer is 16px body text; strong renders in the primary color.

Can non-developers follow along?

Yes. About 70% of graduates come from non-technical roles. The program is designed with planners, operators, and designers in mind.

I can't attend every session.

With advance registration, you may attend up to 2 sessions per round online. Recordings of all sessions are provided.

What is the refund policy?

Refunds are available at your discretion after the first week. See the enrollment terms for full details.

Vendor Detail Accordion

Collapsible vendor detail. The summary shows the vendor name (21px / 800) + a tag pill + chevron. The body opens below a top hairline and renders an info-row list.

Example Social CooperativeSocial Enterprise
  • RepresentativeGil-dong Hong
  • Phone02-0000-0000
  • AddressWorldcup-bukro, Mapo-gu, Seoul
Second CooperativePre-certified Social Enterprise
  • RepresentativeYeon-dae Kim
  • Phone010-0000-0000
  • AddressWangsimni-ro, Seongdong-gu, Seoul

Chevron Marker Spec

All accordions and Collapse components share the same lightweight chevron. A 10px square is drawn with two border sides (right + bottom) — no circular background — and rotated so that collapsed shows › (right) and open rotates 90° to show ⌄ (down).

  • Shape: width / height 10px, border-right + border-bottom 2px (no background, no radius)
  • Collapsed: border color --c-grey, rotate(-45deg) → ›
  • Open: border color --c-primary, rotate(45deg) → ⌄
  • Dark mode: collapsed border uses --c-grey (flips to a lighter grey in dark — preserves visibility); open emphasis uses --c-sky (primary blue is too dark in dark mode).

Usage Rules

Core rules for using the accordion correctly.

DO

  • Use native <details> — never implement a JS toggle; keyboard accessibility is guaranteed automatically.
  • Use the lightweight chevron marker (2-sided border, 10px) — collapsed ›, open ⌄. Never use a circular background or +/× bars.
  • Use for groups of 3 or more items — for 1–2 items, prefer a single <details> (Collapse).

Two-column layout

When there are enough items to warrant a two-column layout, do not use columns (CSS multi-column). Expanding an item causes reflow across columns and breaks alignment.

Instead, use two independent columns: create two grid cells and pre-distribute accordion items into each cell. This way, expanding an item only pushes content within the same column — the opposite column is completely unaffected. Collapse to a single column on mobile (768px and below).

Left question A

Left column answer. Expanding this does not move the right column.

Left question B

Second item in the left independent column.

Right question A

Right column answer. Expanding the left column leaves this one untouched.

Right question B

Second item in the right independent column.