Accordion

New

Overview

An accordion implemented with native HTML details and summary elements.

It builds on the behavior of the native HTML details and summary elements.

The colocated .DizzyAccordion hook preserves the DOM's native open state and synchronizes an item whose open value is controlled by the server.

Notification settings

Choose which product updates and account alerts you receive.

Privacy & security

Control your privacy settings and security preferences. Enable two-factor authentication, manage connected devices, and review active sessions.

Billing & subscription

Manage your plan, payment method, and billing history.

HEEx

<Accordion.accordion id="notification-settings" class="mx-auto max-w-xl">
  <:item name="Notification settings">
    Choose which product updates and account alerts you receive.
  </:item>
  <:item name="Privacy & security" open>
    Control your privacy settings and security preferences. Enable two-factor authentication,
    manage connected devices, and review active sessions.
  </:item>
  <:item name="Billing & subscription">
    Manage your plan, payment method, and billing history.
  </:item>
</Accordion.accordion>

Open one item at a time

Set multiple=false to give each native details element the same name value. Opening an item then closes the previously open item in that accordion, all natively without JavaScript.

Profile details

Update your display name, profile photo, and contact information.

Account security

Review active sessions and configure two-factor authentication.

Billing & subscription

Manage your plan, payment method, and billing history.

HEEx

<Accordion.accordion
  id="account-settings"
  multiple={false}
  class="mx-auto max-w-xl"
>
  <:item name="Profile details" open>
    Update your display name, profile photo, and contact information.
  </:item>
  <:item name="Account security">
    Review active sessions and configure two-factor authentication.
  </:item>
  <:item name="Billing & subscription">
    Manage your plan, payment method, and billing history.
  </:item>
</Accordion.accordion>

Control an item from LiveView

Set an item’s open attribute from a LiveView assign to open or close it after a server event. Pass an on_toggle command to keep that assign synchronized with native changes. The command receives the item name and resulting state, for example %{"item" => "Account security", "open" => "true"}.

Profile details

Update your display name, profile photo, and contact information.

Account security

Review active sessions and configure two-factor authentication.

Billing & subscription

Manage your plan, payment method, and billing history.

HEEx

<div class="mx-auto grid w-full max-w-xl gap-4">
  <div class="flex flex-wrap gap-2">
    <Button.button size={:sm} phx-click="open-controlled-accordion">
      Open account security
    </Button.button>
    <Button.button
      size={:sm}
      kind={:outline}
      phx-click="close-controlled-accordion"
    >
      Close account security
    </Button.button>
  </div>
  <Accordion.accordion
    id="controlled-account-settings"
    on_toggle={JS.push("toggle-controlled-accordion")}
  >
    <:item name="Profile details">
      Update your display name, profile photo, and contact information.
    </:item>
    <:item
      name="Account security"
      open={@accordion_open}
    >
      Review active sessions and configure two-factor authentication.
    </:item>
    <:item name="Billing & subscription">
      Manage your plan, payment method, and billing history.
    </:item>
  </Accordion.accordion>
</div>

Accessibility

Accordion uses the details and summary elements, so by default you get most of the accessible behavior out of the box. Refer to https://www.w3.org/WAI/ARIA/apg/patterns/accordion/ and https://www.w3.org/WAI/ARIA/apg/patterns/accordion/examples/accordion/ for more information.

Add this module

terminal

mix dizzy.add accordion

Component API

Accordion.accordion

Attributes

Attributes for Accordion.accordion
Name	Type	Default	Values
`class`	`:any`	nil	—
`id`	`:string`	Required	—
`multiple`	`:boolean`	true	—
`on_toggle`	`{:struct, Phoenix.LiveView.JS}`	nil	—
`rest`	`:global`	nil	—

Slots

Slots for Accordion.accordion
Name	Required
`item`	Required

Item slot attributes

Attributes for the item slot in Accordion.accordion
Name	Type	Default	Values
`name`	`:string`	Required	—
`open`	`:boolean`	nil	—