68 lines
2.9 KiB
Markdown
68 lines
2.9 KiB
Markdown
# 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 |