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?

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

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