> Markdown version of [Accordion](https://vaadin.com/docs/v8/framework/layout/layout-accordion). Section index: [llms.txt](https://vaadin.com/docs/v8/framework/llms.txt)

# <a id="layout.accordion"></a>Accordion

[Demo](https://demo.vaadin.com/sampler/#ui/structure/accordion)

Accordion is a multicomponent container similar to TabSheet, except that the "tabs" are arranged vertically. Clicking on a tab opens its contained component in the space between the tab and the next one. You can use an Accordion identically to a TabSheet, which it actually inherits. See ["TabSheet"](https://vaadin.com/docs/v8/framework/layout/layout-tabsheet.md#layout.tabsheet) for more information.

The following example shows how you can create a simple accordion. As the Accordion is rather naked alone, we put it inside a Panel that acts as its caption and provides it a border.

```java
// Create the accordion
Accordion accordion = new Accordion();

// Create the first tab, specify caption when adding
Layout tab1 = new VerticalLayout(); // Wrap in a layout
tab1.addComponent(new Image(null, // No component caption
    new ThemeResource("img/planets/Mercury.jpg")));
accordion.addTab(tab1, "Mercury",
    new ThemeResource("img/planets/Mercury_symbol.png"));

// This tab gets its caption from the component caption
Component tab2 = new Image("Venus",
    new ThemeResource("img/planets/Venus.jpg"));
accordion.addTab(tab2).setIcon(
    new ThemeResource("img/planets/Venus_symbol.png"));

// And so forth the other tabs...
String[] tabs = {"Earth", "Mars", "Jupiter", "Saturn"};
for (String caption: tabs) {
    String basename = "img/planets/" + caption;
    VerticalLayout tab = new VerticalLayout();
    tab.addComponent(new Image(null,
            new ThemeResource(basename + ".jpg")));
    accordion.addTab(tab, caption,
            new ThemeResource(basename + "_symbol.png"));
}
```

[An Accordion](#figure.accordion.example1) shows what the example would look like with the default theme.

[Image: accordion example1]

An Accordion

## <a id="css-style-rules"></a>CSS Style Rules

```css
.v-accordion {}
  .v-accordion-item,
  .v-accordion-item-open,
  .v-accordion-item-first {}
    .v-accordion-item-caption {}
      .v-caption {}
    .v-accordion-item-content {}
      .v-scollable {}
```

The top-level element of Accordion has the v-accordion style. An Accordion consists of a sequence of item elements, each of which has a caption element (the tab) and a content area element.

The selected item (tab) has also the v-accordion-open style. The content area is not shown for the closed items.