Accordion

Expandable content panels with single-open-at-a-time behavior (radio input based)

Basic

Accordion uses the same style as the collapse component but works with radio inputs. Control open state by checking/unchecking radio inputs.

Radio inputs with the same name work together - use unique names for separate accordion groups

Radio Input Accordion

Preview Code Auto

How do I create an account?

Click the "Sign Up" button in the top right corner and follow the registration process.

I forgot my password. What should I do?

Click on "Forgot Password" on the login page and follow the instructions sent to your email.

How do I update my profile information?

Go to "My Account" settings and select "Edit Profile" to make changes.

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'
)

Icon Variants

Arrow Icons

Preview Code Auto

How do I create an account?

Click the "Sign Up" button in the top right corner and follow the registration process.

I forgot my password. What should I do?

Click on "Forgot Password" on the login page and follow the instructions sent to your email.

How do I update my profile information?

Go to "My Account" settings and select "Edit Profile" to make changes.

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

Preview Code Auto

How do I create an account?

Click the "Sign Up" button in the top right corner and follow the registration process.

I forgot my password. What should I do?

Click on "Forgot Password" on the login page and follow the instructions sent to your email.

How do I update my profile information?

Go to "My Account" settings and select "Edit Profile" to make changes.

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'
)

Advanced

Joined Accordion

Combined with join utility for seamless borders

Preview Code Auto

How do I create an account?

Click the "Sign Up" button in the top right corner and follow the registration process.

I forgot my password. What should I do?

Click on "Forgot Password" on the login page and follow the instructions sent to your email.

How do I update my profile information?

Go to "My Account" settings and select "Edit Profile" to make changes.

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'
    )

Class Reference

Class	Type	Description
collapse	Component	Base accordion container
collapse-title	Part	Always visible title section
collapse-content	Part	Expandable content section
collapse-arrow	Modifier	Arrow icon variant
collapse-plus	Modifier	Plus/minus icon variant
collapse-open	Modifier	Force open
collapse-close	Modifier	Force close

Do you have a question? ask the community

Do you see a bug? open an issue on GitHub

LLMs Context: Full Markdown | This Component

Resources: DaisyUI | TailwindCSS | FastHTML Repo