Accordion container

A vertical stack of collapsible panels, one or more can be expanded at a time.

The Accordion container shows a vertical stack of collapsible panels. Unlike Tabs, the user can expand more than one panel at a time (configurable). Good for long forms where the user mostly wants to focus on one section but might cross-reference another.

Properties

The Accordion is a layout container, it carries no value. Configure its sections in the designer's Accordion sections editor; child fields render under the section whose index matches their position.

PropertyDescription
accordionSections
string[]
default: ['Section 1', 'Section 2']
Per-section titles. The Nth child group renders under the Nth title.
accordionCollapsed
boolean[]
default: [false, true]
Per-section default collapsed state, same length as accordionSections.
collapsed
boolean
Legacy single-section flag, kept for back-compat with forms saved before multi-section. New forms use accordionCollapsed[].

JavaScript recipes

The Accordion container itself is not addressable from the f365 API, drive it through the fields placed inside its sections.

Reveal a section's fields based on an earlier answer

// Hide the "Tax details" fields until the user marks the record taxable.
const applyTaxable = (taxable: boolean) => {
  f365.field('TaxId').visible = taxable;
  f365.field('TaxRate').visible = taxable;
};

f365.events.onLoad(() => {
  applyTaxable(Boolean(f365.field('IsTaxable').value));
});

f365.events.onChange((e) => {
  if (e.fieldKey === 'IsTaxable') applyTaxable(Boolean(e.newValue));
});

Disable a whole section until a prerequisite is met

f365.events.onChange((e) => {
  if (e.fieldKey !== 'AcceptTerms') return;
  const ok = Boolean(e.newValue);
  // Lock the fields in the "Payment" section until terms are accepted.
  for (const key of ['CardNumber', 'Expiry', 'Cvc']) {
    f365.field(key).enabled = ok;
  }
});

Related articles

  • Tabs container

    A horizontal tab strip with multiple panels, only one panel visible at a time.

  • Section container

    A grouping block that visually separates related fields with a heading and optional collapse behaviour.