Accordion - National Design System

Collapsible content panels for organizing information in a space-efficient manner

Standard

Basic collapsible panels with toggle controls for size, card view, and always-open mode

Overview of the service and how to begin your application.

Documents and eligibility criteria needed before applying.

Fee schedule and expected processing times.

With Leading Icons

Add icons before each title for visual context and faster scanning

Browse housing programs and check eligibility.

Scholarships, transcripts, and certification exams.

Registration renewal, fines, and driving tests.

Built-in Features

Auto-initialization

Activates when .nds-accordion is on the page. No JavaScript setup required.

Smooth Animations

CSS grid transitions with automatic fallback when users prefer reduced motion.

Keyboard Navigation

Arrow keys, Home, End, Enter, and Space for full keyboard control.

JavaScript API

Public API to open, close, and toggle items. Custom events fire on state change for analytics or dependent UI.

Print-ready

All panels expand automatically so no content is hidden on paper.

Accessibility

High contrast and screen reader support built into every state.

Usage Guidelines

When to Use

  • Use accordions to progressively disclose content. Show headings first, let users expand what they need
  • Good for FAQs, categorized service lists, and settings panels where users scan then drill down
  • Avoid accordions for content users need to compare side-by-side. Use tabs or a flat layout instead
  • Keep accordion titles short and scannable. Users decide whether to expand based on the title alone

JavaScript API

The NDS.Accordion API provides methods to create instances, control panels programmatically, and listen for state changes. For dynamically added accordions, call NDS.Accordion.reinit() to initialize new elements.

// Re-scan the page and initialize any new accordions NDS.Accordion.init(); // Shorthand for init(), use after adding dynamic content NDS.Accordion.reinit(); // Create and return an instance for a specific element const instance = NDS.Accordion.create(document.querySelector('#my-accordion')); // Instance methods instance.openItem(0); // Open first item instance.closeItem(1); // Close second item instance.toggleItem(2); // Toggle third item instance.closeAll(); // Close all items // Get currently open items const openItems = instance.getOpenItems(); // Returns: [{index, button, collapse, isOpen}, ...] // Access an existing instance from a DOM element const existing = document.querySelector('#my-accordion').ndsAccordion; // Clean up when removing an accordion from the DOM instance.destroy(); // Custom events (both bubble, same detail shape) document.addEventListener('nds:accordion:shown', (e) => { // e.detail: {index, button, collapse, accordion} console.log('Opened item:', e.detail.index); }); document.addEventListener('nds:accordion:hidden', (e) => { console.log('Closed item:', e.detail.index); });
Was this page useful?
60% of users said Yes from 2843 Feedbacks