AWE Accordion Component

The <awe-accordion> component is a collapsible content panel that allows users to show and hide sections of related content. It's useful for organizing and presenting information in a compact and expandable format.

Basic Usage

The most basic usage of the accordion component includes a title and content.

<awe-accordion 
  title="Accordion Title" 
  content="This is the accordion content that can be expanded and collapsed.">
</awe-accordion>

Types

The accordion component comes in four different types to accommodate various design needs.

Simple Accordion (Default)

The default accordion style with a minimal design.

<awe-accordion 
  type="simple"
  title="Simple Accordion" 
  content="This is a simple accordion with minimal styling.">
</awe-accordion>

Add Accordion

An accordion style with plus/minus icons for expanding and collapsing.

<awe-accordion 
  type="add"
  title="Add Accordion" 
  content="This accordion uses plus and minus icons for expand/collapse actions.">
</awe-accordion>

Dark Accordion

A dark-themed accordion for use on light backgrounds.

<awe-accordion 
  type="dark"
  title="Dark Accordion" 
  content="This is a dark-themed accordion for use on light backgrounds.">
</awe-accordion>

Light Accordion

A light-themed accordion for use on dark backgrounds.

<awe-accordion 
  type="light"
  title="Light Accordion" 
  content="This is a light-themed accordion for use on dark backgrounds.">
</awe-accordion>

States

The accordion component supports different states to indicate its current condition.

Collapsed State (Default)

<awe-accordion 
  title="Collapsed Accordion" 
  content="This accordion is initially collapsed.">
</awe-accordion>

Expanded State

<awe-accordion 
  title="Expanded Accordion" 
  content="This accordion is initially expanded."
  [expanded]="true">
</awe-accordion>

Custom Content

You can provide custom content to the accordion instead of using the simple string content.

<awe-accordion title="Accordion with Custom Content">
  <div class="custom-content">
    <h4>Custom Heading</h4>
    <p>This is a paragraph with <strong>formatted</strong> text.</p>
    <ul>
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
    </ul>
  </div>
</awe-accordion>

Accordion Groups

Multiple accordions can be grouped together to create an accordion panel. You can control whether multiple accordions can be expanded simultaneously or only one at a time.

<div class="accordion-group">
  <awe-accordion 
    title="Section 1" 
    content="Content for section 1"
    (expandedChange)="handleAccordionChange(0, $event)">
  </awe-accordion>
  
  <awe-accordion 
    title="Section 2" 
    content="Content for section 2"
    (expandedChange)="handleAccordionChange(1, $event)">
  </awe-accordion>
  
  <awe-accordion 
    title="Section 3" 
    content="Content for section 3"
    (expandedChange)="handleAccordionChange(2, $event)">
  </awe-accordion>
</div>

// For single expansion mode (only one accordion open at a time)
expandedIndex: number | null = null;

handleAccordionChange(index: number, expanded: boolean): void {
  if (expanded) {
    this.expandedIndex = index;
    // Close other accordions if needed
    // You would need to implement this logic
  } else if (this.expandedIndex === index) {
    this.expandedIndex = null;
  }
}

Accessibility

The accordion component is designed with accessibility in mind:

• It uses proper semantic HTML elements
• It supports keyboard navigation (Tab to focus, Enter or Space to toggle)
• It includes appropriate ARIA attributes
• It maintains focus states for keyboard users
• It provides proper heading structure for screen readers

API Reference

Inputs

Input	Type	Default	Description
type	'simple' | 'add' | 'dark' | 'light'	'simple'	The visual style of the accordion
title	string	'Accordion Heading'	The text displayed in the accordion header
content	string	'Accordion Content'	The text displayed in the accordion body
expanded	boolean	false	Whether the accordion is expanded
disabled	boolean	false	Whether the accordion is disabled

Outputs

Output	Type	Description
expandedChange	EventEmitter<boolean>	Emitted when the accordion expanded state changes

Customization

The accordion component can be customized using CSS variables to match your application's design system. Here are some examples of how you can customize the accordion:

/* Customize the accordion header color */
awe-accordion {
  --accordion-header-bg: #f5f5f5;
  --accordion-header-color: #333333;
}

/* Customize the accordion content area */
awe-accordion {
  --accordion-content-bg: #ffffff;
  --accordion-content-color: #555555;
  --accordion-border-color: #dddddd;
}

Best Practices

• Use accordions to organize related content and reduce visual clutter
• Keep accordion titles short and descriptive
• Ensure the accordion title clearly indicates what content is hidden
• Consider starting with the most important accordion expanded by default
• Use appropriate accordion types based on your design needs
• Ensure sufficient color contrast for accessibility
• Group related accordions together for better user experience
• Consider using custom content for more complex information
• Use the disabled state for accordions that should not be interactive
• Implement keyboard navigation for better accessibility