Contact us
Create app
com.vaadin.flow.component.accordion.
Package com.vaadin.flow.component.accordion

Class Accordion

java.lang.Object
com.vaadin.flow.component.Component
com.vaadin.flow.component.accordion.Accordion

All Implemented Interfaces:

AttachNotifier, DetachNotifier, HasElement, HasSize, HasStyle, Serializable

@Tag("vaadin-accordion") @NpmPackage(value="@vaadin/polymer-legacy-adapter",version="24.7.0-alpha7") @NpmPackage(value="@vaadin/accordion",version="24.7.0-alpha7") @JsModule("@vaadin/polymer-legacy-adapter/style-modules.js") @JsModule("@vaadin/accordion/src/vaadin-accordion.js") public class Accordion extends Component implements HasSize, HasStyle

Accordion is a vertically stacked set of expandable panels. It reduces clutter and helps maintain the user?s focus by showing only the relevant content at a time.

Accordion consists of stacked panels, each composed of two parts: a summary and a content area. Only one panel can be expanded at a time.

The summary is the part that is always visible, and typically describes the contents, for example, with a title. Clicking on the summary toggles the content area?s visibility.

The content area is the collapsible part of a panel. It can contain any component. When the content area is collapsed, the content is invisible and inaccessible by keyboard or screen reader.

Author:

Vaadin Ltd

See Also:

  • Constructor Details

    • Accordion

      public Accordion()

  • Method Details

    • add

      public AccordionPanel add(String summary, Component content)

      Adds a panel created from the given title and content.

      Parameters:

      summary - the title of the panel

      content - the content of th panel

      Returns:

      the panel created and added

    • add

      public AccordionPanel add(AccordionPanel panel)

      Adds a panel.

      Parameters:

      panel - the non-null panel to be added

      Returns:

      the added panel

    • remove

      public void remove(AccordionPanel panel)

      Removes a panel.

      Parameters:

      panel - the non-null panel to be removed

    • remove

      public void remove(Component content)

      Removes a panel based on the content

      Parameters:

      content - the non-null content of the panel to be removed

    • close

      public void close()

      Closes the opened panel (if any) in this accordion.

    • open

      public void open(int index)

      Opens the panel at the specified index.

      Parameters:

      index - the (positive) index of the panel to be open. The first panel is at index zero.

    • open

      public void open(AccordionPanel panel)

      Opens the specified panel.

      Parameters:

      panel - the non-null panel to be opened

    • getOpenedIndex

      @Synchronize(property="opened", value="opened-changed") public OptionalInt getOpenedIndex()

      Gets the index of the currently opened index.

      Returns:

      the index of the opened panel or null if the accordion is closed.

    • getOpenedPanel

      @Synchronize(property="opened", value="opened-changed") public Optional<AccordionPanel> getOpenedPanel()

      Gets the opened panel. Caution should be exercised when using this method with an Accordion which along with its panels were created in a template. Such template children would by default not be children of the Accordion Flow component, thus making it possible for this method to return the wrong panel in such cases.

      Returns:

      the opened panel.

    • addOpenedChangeListener

      public Registration addOpenedChangeListener(ComponentEventListener<Accordion.OpenedChangeEvent> listener)

      Registers a listener to be notified whenever a panel is opened or closed.

      Parameters:

      listener - the listener to be notified

      Returns:

      a handle to the registered listener which could also be used to unregister it.

Copyright © 2025. All rights reserved.