Skip to content
Documentation
Components
Composite
Accordion

Accordion

An accordion shows a header which the user clicks to expand or collapse the body below it, e.g. for FAQs or optional details. It lives in package presentation/ui/accordion. Whether it is open is kept in a *core.State[bool], so you can also open or close it from code.

Accordion

shipping := core.AutoState[bool](wnd).Init(func() bool { return true })
returns := core.AutoState[bool](wnd)
payment := core.AutoState[bool](wnd)

return VStack(
	accordion.Accordion(
		Text("How long does shipping take?"),
		Text("Orders are shipped within two working days."),
		shipping,
	).FullWidth(),
	accordion.Accordion(
		Text("Can I return an item?"),
		Text("You can return every item within 30 days."),
		returns,
	).FullWidth(),
	accordion.Accordion(
		Text("Which payment methods are available?"),
		Text("Invoice, credit card and direct debit."),
		payment,
	).FullWidth(),
).Frame(Frame{Width: L480})

Each accordion is independent; if only one may be open at a time, close the others in an Observe of each state.

Constructors

ConstructorDescription
func Accordion(header, body core.View, open *core.State[bool]) TAccordionCreates an accordion with the given header and body, bound to the open state.

Methods

MethodDescription
Frame(frame ui.Frame) TAccordionFrame sets the accordions frame to control the accordions bounds.
FullWidth() TAccordionFullWidth sets the accordion’s frame to full width.
HideSeparator() TAccordionHideSeparator sets a flag to hide the bottom border (separator) of the accordion.
InputValue(input *core.State[bool]) TAccordionInputValue binds the accordion to an external boolean state, allowing it to be controlled from outside the component.
Small() TAccordionSmall sets the small flag to enable a smaller visual appearance of the accordion.

Related