accordion

Accordions and collapsibles: sections that open and close.

accordion.accordion([], [
  accordion.item("faq", open: True, summary: [text("Is it accessible?")], content: [
    text("Yes. Each section is a native details element."),
  ]),
  accordion.item("faq", open: False, summary: [text("Is it styled?")], content: [
    text("Yes, from the theme."),
  ]),
])

Each section is a <details> element, so it works without scripts and the browser’s find-in-page opens the section it matches. Items that share a group name are exclusive: opening one closes the others. Give each item its own name, or "", to let several stay open. A live view hears a section open or close with event.on("toggle", ...).

Values

accordion

</>

pub fn accordion(
  attributes: List(attribute.Attribute(msg)),
  children: List(element.Element(msg)),
) -> element.Element(msg)

A list of items with a line between each.

accordion_class

</>

pub fn accordion_class() -> css.Class

classes

</>

pub fn classes() -> List(css.Class)

Every class this module uses, for howdy/ui/export.

collapsible

</>

pub fn collapsible(
  attributes: List(attribute.Attribute(msg)),
  open open: Bool,
  summary summary: List(element.Element(msg)),
  content content: List(element.Element(msg)),
) -> element.Element(msg)

A single section that opens and closes, without the accordion’s lines.

collapsible_class

</>

pub fn collapsible_class() -> css.Class

content_class

</>

pub fn content_class() -> css.Class

item

</>

pub fn item(
  group: String,
  open open: Bool,
  summary summary: List(element.Element(msg)),
  content content: List(element.Element(msg)),
) -> element.Element(msg)

One section of an accordion.

item_class

</>

pub fn item_class() -> css.Class