Collapse

Overview

The Collapse 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 collapse system consists of several directives that work together:

axCollapseGroup: The container for collapsible items
axCollapseItem: Individual collapsible sections
axCollapseItemHeader: The header section of a collapsible item
axCollapseItemContent: The collapsible content area
axCollapseCloseButton: A button to toggle the collapse state

Basic Example (HTML)

Accordion Mode (HTML)

Usage in Component (TypeScript)

Options

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

Directive Options

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