Accordion
Overview
The Accordion component in the Phenix Design System provides a way to create collapsible content sections that can be expanded or collapsed to show or hide information. It's built using the Collapse JavaScript functionality and can be customized with utility classes.
Basic Usage
Create a basic accordion using the .px-accordion
class and the .accordion-btn
and .accordion-content
classes for the toggle buttons and content panels:
<!-- Basic Accordion -->
<div class="px-accordion">
<!-- Accordion Item -->
<div class="accordion-item mb-15 bg-white border-1 border-solid border-alpha-10 radius-sm">
<!-- Heading -->
<h4 class="fs-15 pdx-20 pdy-10 mb-0 accordion-btn flexbox align-between align-center-y transtion-fast mouse-pointer">
Accordion Item 1
<i class="far fa-plus lineheight-100 color-gray"></i>
</h4>
<!-- Content -->
<div class="accordion-content pd-20 hidden divider-t fs-14">
This is the content for accordion item 1. It's hidden by default and will be shown when the heading is clicked.
</div>
</div>
<!-- Accordion Item -->
<div class="accordion-item mb-15 bg-white border-1 border-solid border-alpha-10 radius-sm">
<!-- Heading -->
<h4 class="fs-15 pdx-20 pdy-10 mb-0 accordion-btn flexbox align-between align-center-y transtion-fast mouse-pointer">
Accordion Item 2
<i class="far fa-plus lineheight-100 color-gray"></i>
</h4>
<!-- Content -->
<div class="accordion-content pd-20 hidden divider-t fs-14">
This is the content for accordion item 2. It's hidden by default and will be shown when the heading is clicked.
</div>
</div>
</div>
<!-- Initialize with JavaScript -->
<script>
Phenix('.accordion-btn').collapse({
target: '.accordion-content',
related: true,
parent: '.px-accordion'
});
</script>
Accordion Styles
Standard Accordion
The standard accordion has a clean design with a plus/minus icon toggle:
<div class="px-accordion">
<div class="accordion-item mb-15 bg-white border-1 border-solid border-alpha-10 radius-sm">
<h4 class="fs-15 pdx-20 pdy-10 mb-0 accordion-btn flexbox align-between align-center-y transtion-fast mouse-pointer">
Accordion Item
<i class="far fa-plus lineheight-100 color-gray"></i>
</h4>
<div class="accordion-content pd-20 hidden divider-t fs-14">
Accordion content goes here.
</div>
</div>
</div>
Accordion with Arrow Icons
Use arrow icons instead of plus/minus for a different visual style:
<div class="px-accordion">
<div class="accordion-item mb-15 bg-white border-1 border-solid border-alpha-10 radius-sm">
<h4 class="fs-15 pdx-20 pdy-10 mb-0 accordion-btn flexbox align-between align-center-y transtion-fast mouse-pointer">
Accordion Item
<i class="far fa-angle-down lineheight-100 color-gray"></i>
</h4>
<div class="accordion-content pd-20 hidden divider-t fs-14">
Accordion content goes here.
</div>
</div>
</div>
Borderless Accordion
Create a cleaner look by removing borders and using only bottom dividers:
<div class="px-accordion">
<div class="accordion-item mb-15">
<h4 class="fs-15 pdx-10 pdy-10 mb-0 accordion-btn flexbox align-between align-center-y transtion-fast mouse-pointer divider-b">
Accordion Item
<i class="far fa-plus lineheight-100 color-gray"></i>
</h4>
<div class="accordion-content pd-10 hidden fs-14">
Accordion content goes here.
</div>
</div>
</div>
Customization
Custom Styling
Customize the appearance of accordion items using utility classes:
<!-- Custom Styled Accordion -->
<div class="px-accordion">
<div class="accordion-item mb-15 bx-shadow-dp-1 radius-md overflow-hidden">
<h4 class="fs-15 pdx-20 pdy-15 mb-0 accordion-btn flexbox align-between align-center-y bg-primary color-white transtion-fast mouse-pointer">
Custom Styled Accordion
<i class="far fa-plus lineheight-100"></i>
</h4>
<div class="accordion-content pd-20 hidden fs-14 bg-white">
This accordion has custom styling with shadows, colors, and rounded corners.
</div>
</div>
</div>
Custom CSS
Add custom CSS to style the active state of accordion buttons:
/* Change headline color when activated */
.px-accordion .accordion-btn.px-collapse-active {
color: var(--primary-color);
background-color: var(--primary-offwhite);
}
/* Style the icon when activated */
.px-accordion .accordion-btn.px-collapse-active i {
transform: rotate(45deg);
}
Advanced Usage
Pre-Activated Panel
Show an accordion panel by default when the page loads:
<div class="px-accordion" id="default-open-accordion">
<!-- Accordion items here -->
</div>
<script>
// Initialize accordion
Phenix('.accordion-btn').collapse({
target: '.accordion-content',
related: true,
parent: '.px-accordion'
});
// Activate the first item by default
Phenix('#default-open-accordion .accordion-item:first-of-type .accordion-content')
.removeClass('hidden')
.addClass('px-collapse-active');
Phenix('#default-open-accordion .accordion-item:first-of-type .accordion-btn')
.addClass('px-collapse-active');
</script>
Nested Accordions
Create nested accordions for hierarchical content:
<div class="px-accordion">
<div class="accordion-item mb-15 bg-white border-1 border-solid border-alpha-10 radius-sm">
<h4 class="fs-15 pdx-20 pdy-10 mb-0 accordion-btn flexbox align-between align-center-y transtion-fast mouse-pointer">
Parent Accordion
<i class="far fa-plus lineheight-100 color-gray"></i>
</h4>
<div class="accordion-content pd-20 hidden divider-t fs-14">
<p class="mb-15">Parent accordion content.</p>
<!-- Nested Accordion -->
<div class="px-accordion nested-accordion">
<div class="accordion-item mb-10 bg-alpha-05 border-1 border-solid border-alpha-10 radius-sm">
<h5 class="fs-14 pdx-15 pdy-10 mb-0 accordion-btn flexbox align-between align-center-y transtion-fast mouse-pointer">
Nested Item
<i class="far fa-plus lineheight-100 color-gray"></i>
</h5>
<div class="accordion-content pd-15 hidden divider-t fs-13">
Nested accordion content.
</div>
</div>
</div>
</div>
</div>
</div>
<script>
// Initialize both accordions
Phenix('.accordion-btn').collapse({
target: '.accordion-content',
related: true,
parent: function(btn) {
return Phenix(btn).ancestor('.px-accordion');
}
});
</script>
JavaScript API
The Accordion component is powered by the Collapse JavaScript functionality:
Phenix('.accordion-btn').collapse({
target: '.accordion-content', // Selector for the content panel
related: true, // Target is a sibling of the button
parent: '.px-accordion' // Parent accordion container
});
Options Reference
Option | Type | Default | Description |
---|---|---|---|
target | String | null | Selector for the content panel to toggle |
related | Boolean | false | Whether the target is a sibling of the button in the DOM |
parent | String | null | Selector for the accordion container (for closing other panels) |
Data Attributes
All options can also be set using data attributes:
Attribute | Description |
---|---|
data-target | Selector for the content panel to toggle |
data-related | Whether the target is a sibling of the button in the DOM |
data-parent | Selector for the accordion container |
Events
The Collapse functionality fires events that you can listen for:
// Do something when a panel is shown
Phenix('.accordion-btn').on('collapse-showed', event => {
console.log('Panel is now visible');
});
// Do something when a panel is hidden
Phenix('.accordion-content').on('collapse-hidden', event => {
console.log('Panel is now hidden');
});
Accessibility
For better accessibility, consider adding appropriate ARIA attributes:
<div class="px-accordion" id="accordion-example">
<div class="accordion-item mb-15 bg-white border-1 border-solid border-alpha-10 radius-sm">
<h4 class="fs-15 pdx-20 pdy-10 mb-0 accordion-btn flexbox align-between align-center-y transtion-fast mouse-pointer"
id="heading-1"
aria-expanded="false"
aria-controls="content-1">
Accessible Accordion Item
<i class="far fa-plus lineheight-100 color-gray" aria-hidden="true"></i>
</h4>
<div class="accordion-content pd-20 hidden divider-t fs-14"
id="content-1"
aria-labelledby="heading-1"
role="region">
This is an accessible accordion panel.
</div>
</div>
</div>
<script>
// Initialize accordion
Phenix('.accordion-btn').collapse({
target: '.accordion-content',
related: true,
parent: '.px-accordion'
});
// Update ARIA attributes when state changes
Phenix('.accordion-btn').on('collapse-showed', function(event) {
event.target.setAttribute('aria-expanded', 'true');
});
Phenix('.accordion-btn').on('collapse-hidden', function(event) {
event.target.setAttribute('aria-expanded', 'false');
});
</script>
Best Practices
- Use clear headings that indicate what content will be revealed
- Keep content concise within each accordion panel
- Consider opening the first panel by default to provide immediate content
- Use consistent styling across all accordion items
- Add proper accessibility attributes for screen readers
- Consider mobile users when designing accordion interactions