Deepyr Documentation

Accordion using radio inputs

Only one item can be open at a time.

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.

// The Accordion component automatically manages the 'name' attribute for its children.
Accordion(
  [
    AccordionItem(
      initiallyOpen: true,
      title: text('How do I create an account?'),
      content: text('...'),
      classes: 'bg-base-100 border border-base-300',
    ),
    AccordionItem(
      title: text('I forgot my password. What should I do?'),
      content: text('...'),
      classes: 'bg-base-100 border border-base-300',
    ),
    AccordionItem(
      title: text('How do I update my profile information?'),
      content: text('...'),
      classes: 'bg-base-100 border border-base-300',
    ),
  ],
)

Accordion with arrow icon

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.

Accordion(
  name: 'my-accordion-2', // Providing a specific name for the group
  [
    AccordionItem(
      initiallyOpen: true,
      title: text('How do I create an account?'),
      content: text('...'),
      style: [AccordionItem.arrow], // Use the arrow modifier
      classes: 'bg-base-100 border border-base-300',
    ),
    // ... other items with [AccordionItem.arrow]
  ],
)

Accordion with plus/minus icon

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.

Accordion(
  name: 'my-accordion-3',
  [
    AccordionItem(
      initiallyOpen: true,
      title: text('How do I create an account?'),
      content: text('...'),
      style: [AccordionItem.plus], // Use the plus modifier
      classes: 'bg-base-100 border border-base-300',
    ),
    // ... other items with [AccordionItem.plus]
  ],
)

Using Accordion and Join together

To create a seamless group, place the `Accordion` inside a `Join` component. Because `Join` can only style its direct children, you must manually add the `join-item` class to each `AccordionItem` inside the `Accordion` for the styles to apply correctly.

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.

// The smart `Join` component styles its direct children.
// Because the `AccordionItem`s are inside the logical `Accordion` component,
// we must add the `join-item` class to them manually.
Join(
  style: [Join.vertical],
  classes: 'bg-base-100 w-full',
  [
    Accordion(
      name: 'my-accordion-4',
      [
        AccordionItem(
          initiallyOpen: true,
          title: text('How do I create an account?'),
          content: text('...'),
          style: [AccordionItem.arrow],
          // Add `join-item` manually here.
          classes: 'join-item border border-base-300',
        ),
        AccordionItem(
          title: text('I forgot my password. What should I do?'),
          content: text('...'),
          style: [AccordionItem.arrow],
          // Add `join-item` manually here.
          classes: 'join-item border border-base-300',
        ),
        AccordionItem(
          title: text('How do I update my profile information?'),
          content: text('...'),
          style: [AccordionItem.arrow],
          // Add `join-item` manually here.
          classes: 'join-item border border-base-300',
        ),
      ],
    ),
  ],
)