A basic accordion with multiple items that can be opened independently.
An accordion is a UI component that allows users to expand and collapse sections of content. It's useful for organizing information in a space-efficient way.
This accordion uses the base expand functionality with enhanced styling and accessibility features.
The accordion uses
aria-expanded
and
aria-controls
attributes to manage the expand/collapse functionality.
hidden
attribute
data-animate
attribute
The accordion includes several accessibility features:
aria-expanded
and
aria-controls
Only one item can be open at a time. Opening a new item closes the previously opened one.
This is the first section. When you open another section, this one will automatically close.
This is the second section. Notice how opening this section closes the previous one.
This is the third section. The single-select behavior is achieved by using
data-accordion="single"
on the accordion container.
A simpler accordion design without the chevron indicator.
This accordion doesn't use the chevron class, so no arrow indicator is shown.
Sometimes a simpler design is preferred for certain use cases.
Try focusing on the accordion below and using keyboard navigation:
Use the arrow keys to navigate between controls, and Space or Enter to toggle.
Keyboard navigation makes the accordion more accessible for users who can't use a mouse.
Press Home to jump to the first control, or End to jump to the last control.
You can also control accordions programmatically using JavaScript.
This item can be controlled using the buttons above.
Try the "Toggle Second" button to control this item.
Here's the basic HTML structure for an accordion:
<div class="accordion">
<div class="item">
<button class="control chevron" aria-expanded="false" aria-controls="content-1">
Control Text
</button>
<div class="content" id="content-1" hidden data-animate="accordion">
Content goes here
</div>
</div>
</div>Initialize accordions with enhanced functionality:
import { initAccordions, createAccordion } from '@/accordion/scripts/services/accordion'
// Initialize all accordions on the page
initAccordions()
// Or create a specific accordion instance
const accordion = createAccordion('#my-accordion', {
multiSelect: false,
keyboard: true,
onOpen: (element, target) => console.log('Opened:', element),
onClose: (element, target) => console.log('Closed:', element)
})
// Programmatic control
accordion.open(0)
accordion.close(0)
accordion.toggle(0)