SfAccordionItem component is a wrapper around the native
<summary> HTML elements. It allows you to create an accordion component that expands and collapses content.
The root element of this component is
<details>, and any attributes that you apply onto the
SfAccordionItem component will be passed to the
<details> element. The one exception is the
onToggle attribute. The component prevents the native browser behavior and implements its own
See all of the attributes that you can pass to
<details> in the MDN Web Docs (opens new window).
To control the state of the accordion, you can use the
modelValue prop. This prop is a boolean that indicates whether the accordion is open or closed.
This example only allows one item to be open at a time.
<summary> HTML elements, it inherits all of their accessibility features.
<summary> elements are focusable and can be activated by pressing the