Skip to main content
Version: v9

ion-accordion-group

shadow

Accordion group is a container for accordion instances. It manages the state of the accordions and provides keyboard navigation.

Refer to the Accordion documentation for more information.

Interfaces​

AccordionGroupChangeEventDetail​

interface AccordionGroupChangeEventDetail<T = any> {
value: T;
}

AccordionGroupCustomEvent​

While not required, this interface can be used in place of the CustomEvent interface for stronger typing with Ionic events emitted from this component.

interface AccordionGroupCustomEvent<T = any> extends CustomEvent {
detail: AccordionGroupChangeEventDetail<T>;
target: HTMLIonAccordionGroupElement;
}

Properties​

animated​

DescriptionIf true, all accordions inside of the accordion group will animate when expanding or collapsing.
Attributeanimated
Typeboolean
Defaulttrue

disabled​

DescriptionIf true, the accordion group cannot be interacted with.
Attributedisabled
Typeboolean
Defaultfalse

expand​

DescriptionDescribes the expansion behavior for each accordion. Possible values are "compact" and "inset". Defaults to "compact".
Attributeexpand
Type"compact" | "inset"
Default'compact'

mode​

DescriptionThe mode determines which platform styles to use.

This is a virtual property that is set once during initialization and will not update if you change its value after the initial render.
Attributemode
Type"ios" | "md"
Defaultundefined

multiple​

DescriptionIf true, the accordion group can have multiple accordion components expanded at the same time.
Attributemultiple
Typeboolean | undefined
Defaultundefined

readonly​

DescriptionIf true, the accordion group cannot be interacted with, but does not alter the opacity.
Attributereadonly
Typeboolean
Defaultfalse

value​

DescriptionThe value of the accordion group. This controls which accordions are expanded. This should be an array of strings only when multiple="true"
Attributevalue
Typenull | string | string[] | undefined
Defaultundefined

Events​

NameDescriptionBubbles
ionChangeEmitted when the value property has changed as a result of a user action such as a click.

This event will not emit when programmatically setting the value property.
true

Methods​

No public methods available for this component.

CSS Shadow Parts​

No CSS shadow parts available for this component.

CSS Custom Properties​

No CSS custom properties available for this component.

Slots​

NameDescription
The default slot