Accordion

ic.Accordion is a collapsible panel container. Each section has a clickable header that expands or collapses its content area. Panels are created with addPanel and are themselves containers; you add child components to each panel individually. The component supports single or multi-panel expansion, per-panel icons and disabled states, and animated open/close transitions.

Multiple

Multiple controls whether more than one panel can be open at the same time. When set to false, opening a panel automatically closes any other open panel, which is useful for constrained layouts where only one section should be visible. The default is true.

Size

Size scales the panel headers: padding, font size, and icon dimensions all adjust together. The three options are sm, md, and lg. Content inside the panels is not affected by this property.

Disabled

Disabled on the accordion locks all panel headers so none can be toggled. For finer control, individual panels accept their own Disabled flag via addPanel. A disabled panel shows reduced opacity and ignores clicks and keyboard input, while the rest of the accordion remains interactive.

Icons

Each panel header can display an icon before its label. Pass the Icon argument to addPanel with a Lucide icon name or any ic.Asset source. Icons scale automatically with the Size property.

Events

PanelToggled fires whenever a panel is opened or closed by the user. The event payload contains a struct with target (the panel’s internal identifier) and open (whether the panel is now expanded). Programmatic changes via expandAll, collapseAll, or setting Open directly do not trigger this event.

Expand and collapse

expandAll and collapseAll open or close every panel at once. For individual control, each panel returned by addPanel is an ic.accordion.AccordionPanel handle whose Open property you can set directly. Panels can also be added and removed dynamically with addPanel and removePanel.

Custom styling

Every component exposes a .css property for instance-level CSS overrides from MATLAB. The accordion’s CSS structure is straightforward: .ic-ac__header for the clickable header row, .ic-ac__indicator for the left accent bar, .ic-ac__chevron for the rotating arrow, and .ic-ac__body for the content area. This example reskins the headers with a hover lift effect, swaps the indicator to a gradient, and tints the content area to match.

acc = ic.Accordion();
acc.addPanel("Engine", Icon="cpu", Open=true);
acc.addPanel("Chassis", Icon="box");
acc.addPanel("Telemetry", Icon="radio");

% Tinted headers with hover lift
acc.css.style(".ic-ac__header", ...
    "background_color", "#f0fdf4", ...
    "color", "#166534", ...
    "border_bottom", "1px solid #bbf7d0", ...
    "transition", "all 0.15s ease");

acc.css.style(".ic-ac__header:hover", ...
    "background_color", "#dcfce7", ...
    "box_shadow", "0 1px 4px rgba(22, 101, 52, 0.1)");

acc.css.style(".ic-ac__header--open", ...
    "background_color", "#dcfce7", ...
    "font_weight", "600");

% Gradient indicator
acc.css.style(".ic-ac__indicator--open", ...
    "width", "3px", ...
    "background", "linear-gradient(180deg, #22c55e, #0d9488)");

% Soft content area
acc.css.style(".ic-ac__body", ...
    "background_color", "#f0fdf4", ...
    "border_left", "1px solid #bbf7d0", ...
    "padding", "12px 16px");