Accordion - closed tabs by default?

Hi,

is it possible to make all the tabs of an accordion component closed by default on screen opening?
Right now first tab is opened.

Thanks in advance!

Hi!

Unfortunately, there is no API to close all tabs in the accordion. But you can try a workaround.
Add empty tab to your accordion with a style which hides header of the empty tab:

<accordion id="accordion" height="100%" width="100%">
    <tab id="firstTab" caption="Tab 1">
        <label value="Tab 1 content"/>
    </tab>
    <tab id="secondTab" caption="Tab 2">
        <label value="Tab 2 content"/>
    </tab>
    <tab id="thirdTab" caption="Tab 3">
        <label value="Tab 3 content"/>
    </tab>
    <tab id="emptyTab" stylename="hidden-tab"/>
</accordion>

Style:

.v-accordion-item-hidden-tab {
  .v-accordion-item-caption {
    display: none;
  }
}

In the controller select “emptyTab”:

@Inject
private Accordion accordion;
@Override
public void init(Map<String, Object> params) {
    accordion.setSelectedTab("emptyTab");
}

Result:
image

Thank you, @Pinyazhin!

This workaround works great!