Accordion

Collapsible content sections grouped together. Supports exclusive mode where only one section can be open at a time, or multi-open mode where any combination is allowed.

Preview

Rendered in WASM — scroll may behave differently from the rest of the page

Usage

rust

use ui_theme::components::accordion;

let titles = &["Flight Info", "Weather", "Navigation"];
let mut open = vec![true, false, false];

accordion(ui, &theme, titles, &mut open, false, |ui, index| {
  match index {
      0 => { ui.label("Flight: SWR 1234"); }
      1 => { ui.label("QNH: 1016 hPa"); }
      2 => { ui.label("Waypoint: DEGES"); }
      _ => {}
  }
});

// Exclusive mode — only one section open at a time
accordion(ui, &theme, titles, &mut open, true, |ui, index| {
  ui.label(format!("Section {}", index));
});

// Nested — accordion inside accordion
accordion(ui, &theme, &["Layers", "Filters"], &mut outer_open, false, |ui, i| {
  accordion(ui, &theme, &["Sub A", "Sub B"], &mut inner_open[i], true, |ui, j| {
      ui.label(format!("Nested content {}.{}", i, j));
  });
});

Props

Prop	Type	Default	Description
`ui`	`&mut Ui`	required	The egui UI context
`theme`	`&Theme`	required	Theme instance
`items`	`&[&str]`	required	Section header titles
`open`	`&mut Vec<bool>`	required	Which sections are expanded (must match items length)
`exclusive`	`bool`	`false`	When true, opening one section closes all others
`add_body`	`impl FnMut(&mut Ui, usize)`	required	Renders content for each section by index (FnMut allows nested accordions)