# daisyUI Accordion Component Documentation

## Overview
The Accordion component is used for showing and hiding content, but only one item can stay open at a time. It works with radio inputs where all radio inputs with the same name work together, allowing only one item to be open simultaneously.

## Key Features
- Only one accordion item can be open at a time
- Uses radio inputs for controlling which item is open
- Supports different icon styles: arrow, plus/minus
- Can be joined together using the `join` component

## Classes and Modifiers

| Class name | Type | Description |
|------------|------|-------------|
| collapse | Component | Base collapse class |
| collapse-title | Part | Title part of accordion item |
| collapse-content | Part | Content part of accordion item |
| collapse-arrow | Modifier | Adds arrow icon |
| collapse-plus | Modifier | Adds plus/minus icon |
| collapse-open | Modifier | Force open accordion item |
| collapse-close | Modifier | Force close accordion item |

## Usage Examples

### Basic Accordion
```html
<div class="collapse bg-base-100 border border-base-300">
  <input type="radio" name="my-accordion-1" checked="checked" />
  <div class="collapse-title font-semibold">How do I create an account?</div>
  <div class="collapse-content text-sm">Click the "Sign Up" button in the top right corner and follow the registration process.</div>
</div>
```

### Accordion with Arrow Icon
```html
<div class="collapse collapse-arrow bg-base-100 border border-base-300">
  <input type="radio" name="my-accordion-2" checked="checked" />
  <div class="collapse-title font-semibold">How do I create an account?</div>
  <div class="collapse-content text-sm">Click the "Sign Up" button in the top right corner and follow the registration process.</div>
</div>
```

### Accordion with Plus/Minus Icon
```html
<div class="collapse collapse-plus bg-base-100 border border-base-300">
  <input type="radio" name="my-accordion-3" checked="checked" />
  <div class="collapse-title font-semibold">How do I create an account?</div>
  <div class="collapse-content text-sm">Click the "Sign Up" button in the top right corner and follow the registration process.</div>
</div>
```

### Joined Accordion Items
```html
<div class="join join-vertical bg-base-100">
  <div class="collapse collapse-arrow join-item border-base-300 border">
    <input type="radio" name="my-accordion-4" checked="checked" />
    <div class="collapse-title font-semibold">How do I create an account?</div>
    <div class="collapse-content text-sm">Click the "Sign Up" button in the top right corner and follow the registration process.</div>
  </div>
</div>
```

## Important Notes
- All radio inputs with the same name work together to control the accordion behavior
- Only one item can be open at a time within the same group
- Use different names for radio inputs if you have multiple sets of accordions on the same page
- The accordion uses the same styling as the collapse component but with radio input controls