Calcite Accordion open/close items

[MichaelWen_Timmons]

Is there a way to allow only one Calcite accordion item to be expanded at any time? I have an accordion with five panels, and it would be nice if when one is opened the previously open items collapse so the screen is not too cluttered. I didn't see any event that I could use but maybe there's a way to do this with styling?

Thanks.

[KittyHurley · Accepted solution]

Hi @MichaelWen_Timmons.

Yes, the component can restrict expansion of accordion-item's to one at a time using the "selection-mode" attribute (selectionMode property).

The "single" value allows one open accordion-item, while "single-persist" allows and requires one open accordion-item.

For instance:

<!-- The selection-mode="single" allows one open accordion-item -->
<calcite-accordion selection-mode="single">
    <calcite-accordion-item icon="embark" item-title="Watercraft"
        item-subtitle="Yachts, boats, and dinghies">Example accordion item
        content</calcite-accordion-item>
    <calcite-accordion-item icon="car" item-title="Automobiles"
        item-subtitle="Cars, trucks, and busses">Example accordion item content
    </calcite-accordion-item>
    <calcite-accordion-item icon="plane" item-title="Aircrafts"
        item-subtitle="Planes, helicopters, and jets">Example accordion item content
    </calcite-accordion-item>
</calcite-accordion>

<!-- The selection-mode="single-persist" value allows and requires one open accordion-item. -->
<calcite-accordion selection-mode="single-persist">
    <calcite-accordion-item icon="embark" item-title="Watercraft"
        item-subtitle="Yachts, boats, and dinghies">Example accordion item
        content</calcite-accordion-item>
    <calcite-accordion-item icon="car" item-title="Automobiles"
        item-subtitle="Cars, trucks, and busses">Example accordion item content
    </calcite-accordion-item>
    <calcite-accordion-item icon="plane" item-title="Aircrafts"
        item-subtitle="Planes, helicopters, and jets">Example accordion item content
    </calcite-accordion-item>
</calcite-accordion>