Accordion

Overview

The Accordion directive provides a flexible way to create collapsible content sections. It consists of several directives that work together to create expandable/collapsible content areas with smooth animations. The directive supports both individual collapsible sections and accordion-style behavior where only one section can be open at a time.

Features

Create collapsible content sections with smooth animations
Support for accordion mode (only one section open at a time)
Customizable headers and content areas
Built-in toggle buttons with click events
Programmatic control over collapse state
Smooth height and opacity transitions

Usage

The accordion system consists of several directives that work together:

axAccordionGroup: The container for collapsible items
axAccordionItem: Individual collapsible sections
axAccordionItemHeader: The header section of a collapsible item
axAccordionItemContent: The collapsible content area
axAccordionCloseButton: A button to toggle the collapse state

Basic Example (HTML)

Accordion Mode (HTML)

Usage in Component (TypeScript)

Options

The accordion directive provides several configuration options to customize its behavior:

Directive Options

Demo

Section 1

Content for section 1

Section 2

Content for section 2

Best Practices

Use the accordion mode when you want only one section open at a time
Include clear visual indicators for the collapse/expand state
Ensure headers are descriptive and clearly indicate the content they control
Consider adding keyboard navigation support for accessibility
Use appropriate transition durations for smooth animations