A disclosure list on the vertical axis. Each item is a collapsed title column; opening one widens it sideways, unfolding its detail as new columns beside the title along the reading direction.

$ npx verticallyworks add column-accordion

Design question

A horizontal accordion grows its panel downward, adding row height. On the vertical axis, downward is the reading length of the title column · growing it there breaks the line. So where does the panel go?

Decision

Widen, don't lengthen. The open item unfolds its detail as new columns to the left of the title (the reading direction), pushing the rest of the list leftward. The title column keeps its length; only the list's width changes.

Default

글씨를 세로로위에서 아래로 쓴다

A list of collapsed title columns. Opening one widens it sideways · the detail unfolds as new columns beside the title, along the reading direction, so the title column’s length never breaks. One item open at a time.

tsx
1import { ColumnAccordion } from "@/components/vw/column-accordion"
2
3export function Guide() {
4  return (
5    <ColumnAccordion
6      aria-label="세로쓰기 안내"
7      defaultOpen={0}          // one panel open at a time
8      items={[

Source

The exact file npx verticallyworks add column-accordion copies into your project · yours to edit. Styling comes entirely from the design tokens.

tsx
1"use client";
2
3/**
4 * ColumnAccordion · a disclosure list on the vertical axis.
5 *
6 * A horizontal accordion grows its panel DOWN, adding row height. On the
7 * vertical axis "down" is the reading length of the title column, so growing
8 * downward would break the line. Instead the open item widens SIDEWAYS: the

Guidance

Unfold the detail sideways along the reading direction (leftward), beside the title · not below it
Keep one panel open at a time so the list's width stays predictable
Point the disclosure chevron toward the unfold and rotate it on open
Give each header a 44px+ hit target and animate width, never height

Don't

Grow the panel downward · that stretches the title column and breaks its line
Rotate a finished horizontal accordion 90° · the chevron, focus order, and motion all end up wrong
Open every item at once · the list can widen past the viewport with nothing to anchor to

Accessibility

Each header is a button with aria-expanded and aria-controls pointing at its panel; the panel is a region labelled by its header. Enter/Space toggles, Tab moves between headers, and the visual R→L order matches DOM and tab order. Collapsed panels are aria-hidden.

Open question

Should the detail unfold leftward (reading direction, so it reads as the next columns) or rightward (keeping the title's screen position fixed)? The home tile shows the rightward variant; this documents the leftward one.

PreviousVertical List Cell Next Tiered Page

1	import { ColumnAccordion } from "@/components/vw/column-accordion"
2
3	export function Guide() {
4	return (
5	<ColumnAccordion
6	aria-label="세로쓰기 안내"
7	defaultOpen={0} // one panel open at a time
8	items={[

1	"use client";
2
3	/**
4	* ColumnAccordion · a disclosure list on the vertical axis.
5	*
6	* A horizontal accordion grows its panel DOWN, adding row height. On the
7	* vertical axis "down" is the reading length of the title column, so growing
8	* downward would break the line. Instead the open item widens SIDEWAYS: the