accordion

accordion creates panels with content that can be collapsed and expanded.

XML Element

accordion

Java Class

JmixAccordion

Basics

LIVE DEMO

Use accordion to group or hide similar content. Content is placed in nested accordionPanel elements. There can be multiple such panels, but only one can be expanded at a time.

The live sample defines two panels. The focused snippet shows the panel containing a form; its summaryText remains visible while the nested content is collapsed:

<accordion id="mainAccordion" height="100%" width="100%">
    <accordionPanel summaryText="Panel with FormLayout">
        <formLayout>
            <textField label="Field 1"/>
            <textField label="Field 2"/>
            <textField label="Field 3"/>
        </formLayout>
    </accordionPanel>
</accordion>

Theme Variants

LIVE DEMO

Use the themeNames attribute to set a component theme.

Variant Description Supported By

filled

Applies a filled background style to the panel.

Aura, Lumo

reverse

Displays the toggle icon after the summary text.

Aura, Lumo

small

Makes the panel smaller.

Aura, Lumo

no-padding

Removes the default padding from the content area.

Aura

Attributes

Common attributes apply to both accordion and accordionPanel. The following attributes are specific to accordionPanel:

Name Description Default

opened

Controls whether the panel is expanded.

false

summaryText

Sets the summary that remains visible when the panel is collapsed.

—

Handlers

The same handlers can be configured on accordion and accordionPanel.

Name Description

AttachEvent

Fires when the component is attached to the UI.

DetachEvent

Fires when the component is detached from the UI.

OpenedChangeEvent

Fires when a panel is expanded or collapsed. A handler on accordion observes all panels; a handler on accordionPanel observes only that panel.

Elements

An accordion contains one or more accordionPanel elements. Each panel accepts one or more components or layouts as its content.

See Also