Accordion

Accordions are vertically stacked expandable items. They reduce clutter by showing only essential information initially and revealing details on demand.

When to use

• To organize and present large amounts of content in a compact way
• For FAQs (Frequently Asked Questions)
• To create collapsible sections in forms or settings
• When you need to reduce cognitive load by hiding secondary information

Anatomy

• Container: Wraps all accordion items
• Item: Individual collapsible section
• Trigger: Clickable header that toggles content
• Content: Hidden/shown area containing detailed information
• Icon: Visual indicator showing open/closed state

Installation

npm install @pm7/core

Important Implementation Notes

CSS Classes

Data Attributes

Basic Usage

<!-- Default accordion -->
<div class="pm7-accordion" data-pm7-accordion>
  <div class="pm7-accordion-item">
    <button class="pm7-accordion-trigger">
      <span>Accordion Header</span>
      <svg class="pm7-accordion-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M19 9l-7 7-7-7"/>
      </svg>
    </button>
    <div class="pm7-accordion-content">
      <div class="pm7-accordion-content-inner">
        <p>Your content here</p>
      </div>
    </div>
  </div>
</div>

<!-- Accordion with icon at start -->
<div class="pm7-accordion" data-pm7-accordion data-icon-position="start">
  <!-- Accordion items -->
</div>

<!-- Or using CSS class directly -->
<div class="pm7-accordion pm7-accordion--icon-start" data-pm7-accordion>
  <!-- Accordion items -->
</div>

<!-- Accordion with inline icon (direct after text) -->
<div class="pm7-accordion pm7-accordion--icon-inline" data-pm7-accordion>
  <!-- Icon appears 10px after text instead of right-aligned -->
</div>

<!-- Accordion with height limit -->
<div class="pm7-accordion" data-pm7-accordion data-height="sm">
  <!-- Accordion items with small height limit (200px) -->
</div>

<!-- Accordion with fixed custom height -->
<div class="pm7-accordion" data-pm7-accordion data-height="fixed" data-fixed-height="350">
  <!-- Accordion items with fixed height of 350px -->
</div>

<!-- Full width accordion -->
<div class="pm7-accordion pm7-accordion--width-max" data-pm7-accordion>
  <!-- Accordion takes 100% width of parent container -->
</div>

<!-- Fixed max-width accordions -->
<div class="pm7-accordion pm7-accordion--width-800" data-pm7-accordion>
  <!-- Accordion with max-width of 800px -->
</div>

<div class="pm7-accordion pm7-accordion--width-1000" data-pm7-accordion>
  <!-- Accordion with max-width of 1000px -->
</div>

JavaScript API

import { PM7Accordion } from '@pm7/core';

// Manual initialization
const accordionElement = document.querySelector('.pm7-accordion');
const accordion = new PM7Accordion(accordionElement, {
  allowMultiple: true,
  defaultOpen: 0, // Open first item by default
  iconPosition: 'start', // Position icon at the start
  textAlign: 'center', // Center align header text
  height: 'md', // Set height limit ('sm', 'md', 'lg', 'fixed', or null)
  fixedHeight: 350 // Custom height when using 'fixed' option
});

// Methods
accordion.open(0);      // Open specific item
accordion.close(0);     // Close specific item
accordion.openAll();    // Open all items
accordion.closeAll();   // Close all items
accordion.toggle(0);    // Toggle specific item

Advanced Example

<!-- Accordion with custom configuration -->
<div class="pm7-accordion pm7-accordion--lg pm7-accordion--separated" data-pm7-accordion data-allow-multiple="true">
  <div class="pm7-accordion-item">
    <button class="pm7-accordion-trigger">
      <span>Section 1</span>
      <svg class="pm7-accordion-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M19 9l-7 7-7-7"/>
      </svg>
    </button>
    <div class="pm7-accordion-content">
      <div class="pm7-accordion-content-inner">
        Content for section 1
      </div>
    </div>
  </div>
  <div class="pm7-accordion-item">
    <button class="pm7-accordion-trigger">
      <span>Section 2</span>
      <svg class="pm7-accordion-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M19 9l-7 7-7-7"/>
      </svg>
    </button>
    <div class="pm7-accordion-content">
      <div class="pm7-accordion-content-inner">
        Content for section 2
      </div>
    </div>
  </div>
</div>

Accessibility

• Keyboard navigation with Tab, Enter, and Space keys
• Proper ARIA attributes (aria-expanded)
• Focus management and visible focus indicators
• Screen reader announcements for state changes

Copy this link that can be used as documentation for working with this component: