Single Expansion
<h3 class="apg-accordion-header">
What is an Accordion?
</h3>
An accordion is a vertically stacked set of interactive headings that each reveal a section of content.
<h3 class="apg-accordion-header">
When to use an Accordion?
</h3>
Use accordions when you need to organize content into collapsible sections.
<h3 class="apg-accordion-header">
Accessibility Considerations
</h3>
Accordions must be keyboard accessible and properly announce their expanded/collapsed state to screen readers.
Multiple Expansion
<h3 class="apg-accordion-header">
Section One
</h3>
Content for section one. With allowMultiple enabled, multiple sections can be open.
<h3 class="apg-accordion-header">
Section Two
</h3>
Content for section two.
<h3 class="apg-accordion-header">
Section Three
</h3>
Content for section three.
With Disabled Items
<h3 class="apg-accordion-header">
Available Section
</h3>
This section can be expanded and collapsed normally.
<h3 class="apg-accordion-header">
Disabled Section
</h3>
This content is not accessible because the section is disabled.
<h3 class="apg-accordion-header">
Another Available Section
</h3>
This section can also be expanded.