Accordions provide collapsible sections in your content to reduce vertical space while providing a way of organizing and grouping information. All ion-accordion components should be grouped inside ion-accordion-group components.
Which accordion is open is controlled by setting the value property on ion-accordion-group. Setting this property allows developers to programmatically expand or collapse certain accordions.
Most ionChange events emitted by other components such as Input and Textarea bubble. As a result, these events will bubble up and cause your ionChange listener on the Accordion Group to fire if the associated components are used inside of an Accordion.
When using other components that emit ionChange inside of Accordion it is recommended to have the ionChange callback on Accordion Group check the target key on the event passed to the callback to verify that ionChange is coming from the Accordion Group and not any descendants.
Developers can listen for the ionChange event to be notified when accordions expand or collapse.
Developers can allow multiple accordions to be open at once with the multiple property.
Individual accordions can be disabled with the disabled property on ion-accordion.
The accordion group can be disabled with the disabled property on ion-accordion-group.
Individual accordions can be disabled with the readonly property on ion-accordion.
The accordion group can be disabled with the readonly property on ion-accordion-group.
The header slot is used as the toggle that will expand or collapse your accordion. We recommend you use an ion-item here to take advantage of the accessibility and theming functionalities.
When using ion-item in the header slot, the ion-item's button prop is set to true and the detail prop is set to false. In addition, we will also automatically add a toggle icon to the ion-item. This icon will automatically be rotated when you expand or collapse the accordion. Refer to Customizing Icons for more information.
The content slot is used as the part of the accordion that is revealed or hidden depending on the state of your accordion. You can place anything here except for another ion-content instance as only one instance of ion-content should be added per page.
There are two built in expansion styles: compact and inset. This expansion style is set via the expand property on ion-accordion-group.
When expand="inset", the accordion group is given a border radius. On md mode, the entire accordion will shift down when it is opened.
You can customize the expansion behavior by styling based on the accordion's state. There are four state classes applied to ion-accordion. Styling using these classes can allow you to create advanced state transitions:
If you need to target specific pieces of the accordion, we recommend targeting the element directly. For example, if you want to customize the ion-item in your header slot when the accordion is expanded, you can use the following selector:
When using an ion-item in the header slot, we automatically add an ion-icon. The type of icon used can be controlled by the toggleIcon property, and the slot it is added to can be controlled with the toggleIconSlot property.
If you would like to manage the icon yourself or use an icon that is not an ion-icon, you can add the ion-accordion-toggle-icon class to the icon element.
Regardless of which option you choose, the icon will automatically be rotated when you expand or collapse the accordion.
Since ion-accordion acts as a shell around the header and content elements, you can easily theme the accordion however you would like. You can theme the header by targeting the slotted ion-item. Since you are using ion-item, you also have access to all of the ion-item CSS Variables and ion-item Shadow Parts. Theming the content is also easily achieved by targeting the element that is in the content slot.
By default, animations are enabled when expanding or collapsing an accordion item. Animations will be automatically disabled when the prefers-reduced-motion media query is supported and set to reduce. For browsers that do not support this, animations can be disabled by setting the animated config in your Ionic Framework app.
When used inside an ion-accordion-group, ion-accordion has full keyboard support for interacting with the component. The following table details what each key does:
The accordion animation works by knowing the height of the content slot when the animation starts. The accordion expects that this height will remain consistent throughout the animation. As a result, developers should avoid performing any operation that may change the height of the content during the animation.
For example, lazily loading images may cause layout shifts as they load. As the animation plays, a lazily loaded image (such as a native <img> with loading="lazy") loads its data and changes its dimensions to fit, which can change the height of the content slot. Developers have a few options for avoiding this:
Load images eagerly by omitting loading="lazy". An <img> does not lazy load by default, so the image loads up front instead of during the animation. This is the simplest option and works well if you have small images that do not significantly benefit from lazy loading.
Reserve space for the image ahead of time. If you need lazy loading and know the dimensions of the images (such as loading icons of the same size), set a width and height on the <img> using its attributes or CSS. This gives you the benefit of lazy loading while avoiding layout shifts.
If neither of these options are applicable, developers may want to consider disabling animations altogether by using the animated property on ion-accordion-group.
No events available for this component.
No public methods available for this component.
No CSS custom properties available for this component.