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

  • XML element: accordion

  • Java class: JmixAccordion


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.

To add accordionPanel in Jmix Studio, select the component in the screen descriptor XML or in the Jmix UI structure panel and click on the Add→AccordionPanel button in the Component Inspector panel.

The following example demonstrates accordion with three panels:

<accordion id="accordion">
    <accordionPanel summaryText="Stamford">
        <div text="Stamford is a town in the South Kesteven District of Lincolnshire, England."/>
    <accordionPanel summaryText="Boston">
        <div text="Boston is the capital and largest city of the American Northeast."/>
    <accordionPanel summaryText="London">
        <div text="London is the capital and largest city of England and the United Kingdom." />
accordion basic

Each accordionPanel has a summary and a content area to put other components or layouts. The summary remains visible, even when the panel is collapsed. The component allows to provide longer summaries, as opposed to tabSheet.


Below are the attributes for accordion and its accordionPanel element.


Specifies whether the panel is opened.


Specifies a summary for the content inside the panel.


Handlers are the same for accordion and accordionPanel element.

Чтобы сгенерировать заглушку обработчика в Jmix Studio, используйте вкладку Handlers панели инспектора Jmix UI, или команду Generate Handler, доступную на верхней панели контроллера экрана и через меню CodeGenerate (Alt+Insert / Cmd+N).


OpenedChangedEvent is sent every time a panel is expanded or collapsed. Set this handler for accordion to listen to all panels, or set it only for a specific accordionPanel element.

See Also

See Vaadin Docs for more information.