<a id="accordion"></a>

## Accordion  
**Category**: Actions
Expandable content panels with single-open-at-a-time behavior (radio input based)
### Examples

#### Radio Input Accordion  
```python
Div(
    Input(type='radio', name='my-accordion-1', checked=True),
    Div('How do I create an account?', cls='collapse-title font-semibold'),
    Div('Click the "Sign Up" button in the top right corner and follow the registration process.', cls='collapse-content text-sm'),
    cls='collapse bg-base-100 border border-base-300'
),
Div(
    Input(type='radio', name='my-accordion-1'),
    Div('I forgot my password. What should I do?', cls='collapse-title font-semibold'),
    Div('Click on "Forgot Password" on the login page and follow the instructions sent to your email.', cls='collapse-content text-sm'),
    cls='collapse bg-base-100 border border-base-300'
),
Div(
    Input(type='radio', name='my-accordion-1'),
    Div('How do I update my profile information?', cls='collapse-title font-semibold'),
    Div('Go to "My Account" settings and select "Edit Profile" to make changes.', cls='collapse-content text-sm'),
    cls='collapse bg-base-100 border border-base-300'
)
```

#### Arrow Icons  
```python
Div(
    Input(type='radio', name='my-accordion-2', checked=True),
    Div('How do I create an account?', cls='collapse-title font-semibold'),
    Div('Click the "Sign Up" button in the top right corner and follow the registration process.', cls='collapse-content text-sm'),
    cls='collapse collapse-arrow bg-base-100 border border-base-300'
),
Div(
    Input(type='radio', name='my-accordion-2'),
    Div('I forgot my password. What should I do?', cls='collapse-title font-semibold'),
    Div('Click on "Forgot Password" on the login page and follow the instructions sent to your email.', cls='collapse-content text-sm'),
    cls='collapse collapse-arrow bg-base-100 border border-base-300'
),
Div(
    Input(type='radio', name='my-accordion-2'),
    Div('How do I update my profile information?', cls='collapse-title font-semibold'),
    Div('Go to "My Account" settings and select "Edit Profile" to make changes.', cls='collapse-content text-sm'),
    cls='collapse collapse-arrow bg-base-100 border border-base-300'
)
```

#### Plus/Minus Icons  
```python
Div(
    Input(type='radio', name='my-accordion-3', checked=True),
    Div('How do I create an account?', cls='collapse-title font-semibold'),
    Div('Click the "Sign Up" button in the top right corner and follow the registration process.', cls='collapse-content text-sm'),
    cls='collapse collapse-plus bg-base-100 border border-base-300'
),
Div(
    Input(type='radio', name='my-accordion-3'),
    Div('I forgot my password. What should I do?', cls='collapse-title font-semibold'),
    Div('Click on "Forgot Password" on the login page and follow the instructions sent to your email.', cls='collapse-content text-sm'),
    cls='collapse collapse-plus bg-base-100 border border-base-300'
),
Div(
    Input(type='radio', name='my-accordion-3'),
    Div('How do I update my profile information?', cls='collapse-title font-semibold'),
    Div('Go to "My Account" settings and select "Edit Profile" to make changes.', cls='collapse-content text-sm'),
    cls='collapse collapse-plus bg-base-100 border border-base-300'
)
```

#### Joined Accordion  
```python
Div(
    Div(
        Input(type='radio', name='my-accordion-4', checked=True),
        Div('How do I create an account?', cls='collapse-title font-semibold'),
        Div('Click the "Sign Up" button in the top right corner and follow the registration process.', cls='collapse-content text-sm'),
        cls='collapse collapse-arrow join-item border-base-300 border'
    ),
    Div(
        Input(type='radio', name='my-accordion-4'),
        Div('I forgot my password. What should I do?', cls='collapse-title font-semibold'),
        Div('Click on "Forgot Password" on the login page and follow the instructions sent to your email.', cls='collapse-content text-sm'),
        cls='collapse collapse-arrow join-item border-base-300 border'
    ),
    Div(
        Input(type='radio', name='my-accordion-4'),
        Div('How do I update my profile information?', cls='collapse-title font-semibold'),
        Div('Go to "My Account" settings and select "Edit Profile" to make changes.', cls='collapse-content text-sm'),
        cls='collapse collapse-arrow join-item border-base-300 border'
    ),
    cls='join join-vertical bg-base-100 w-full'
    )
```