accordion

binds state

A heading that shows or hides the content under it when pressed. Stack several for an FAQ.

Spec · edit me

No problems. The parser accepted every line.

Result · try itOpen in playground

Tweak the props"text"

gap

Props

"text"textThe heading.required

bindstateA true/false state name: true while open.required

gapnumberSpace between children in pixels (default 10).10

onactionActions to run after it opens or closes, e.g. emit:changed. Separate several with ;—

ifconditionShow only when this expression is true, e.g. if=done or if={count>0}. Every element takes it.—

tipstringA short explanation shown on hover, keyboard focus or a tap, e.g. tip="Orders not yet shipped": for a term or a number some people won't know, instead of more words on screen. It makes the element a Tab stop if it isn't one. Every element takes it.—

Children: any elements.

For your model

The exact guide entry a model gets for accordion, generated from the same definition.

  accordion "<text>"  — A heading that shows or hides the content under it when pressed. Stack several for an FAQ.
    "<text>" (required)  The heading.
    bind=<state, required>  A true/false state name: true while open.
    gap=<number>  Space between children in pixels (default 10).
    on=<action>  Actions to run after it opens or closes, e.g. emit:changed. Separate several with ;
    children: any elements
    example:
      state returns=true
      accordion "Returns" bind=returns
        text "Free returns within 30 days, unworn."
      accordion "Shipping" bind=shipping
        text "Ships in two business days."

More layout

column row overlap grid card list list-item divider spacer each timeline step carousel scroll

All layout elements on one page →