PhxShadcn

Accordion

Single mode, collapsible Open in playground 

<.accordion id="accordion-single-default" type="single" collapsible>
  <.accordion_item value="item-1">
    <.accordion_trigger>Is it accessible?</.accordion_trigger>
    <.accordion_content>Yes. It adheres to the WAI-ARIA design pattern.</.accordion_content>
  </.accordion_item>
  <.accordion_item value="item-2">
    <.accordion_trigger>Is it styled?</.accordion_trigger>
    <.accordion_content>Yes. It comes with default styles that match the other components' aesthetic.</.accordion_content>
  </.accordion_item>
  <.accordion_item value="item-3">
    <.accordion_trigger>Is it animated?</.accordion_trigger>
    <.accordion_content>Yes. It's animated by default, but you can disable it if you prefer.</.accordion_content>
  </.accordion_item>
</.accordion>
Multiple mode — open several items at once Open in playground 

<.accordion id="accordion-single-multiple" type="multiple">
  <.accordion_item value="item-1">
    <.accordion_trigger>First section</.accordion_trigger>
    <.accordion_content>Content for the first section.</.accordion_content>
  </.accordion_item>
  <.accordion_item value="item-2">
    <.accordion_trigger>Second section</.accordion_trigger>
    <.accordion_content>Content for the second section.</.accordion_content>
  </.accordion_item>
  <.accordion_item value="item-3">
    <.accordion_trigger>Third section</.accordion_trigger>
    <.accordion_content>Content for the third section.</.accordion_content>
  </.accordion_item>
</.accordion>
With an item open by default Open in playground 

<.accordion
  id="accordion-single-default-open"
  type="single"
  default_value="item-1"
  collapsible
>
  <.accordion_item value="item-1">
    <.accordion_trigger>Open by default</.accordion_trigger>
    <.accordion_content>This item starts open.</.accordion_content>
  </.accordion_item>
  <.accordion_item value="item-2">
    <.accordion_trigger>Another item</.accordion_trigger>
    <.accordion_content>Click to open this one.</.accordion_content>
  </.accordion_item>
</.accordion>
One item is disabled Open in playground 

<.accordion id="accordion-single-disabled-item" type="single" collapsible>
  <.accordion_item value="item-1">
    <.accordion_trigger>Enabled item</.accordion_trigger>
    <.accordion_content>This item can be toggled.</.accordion_content>
  </.accordion_item>
  <.accordion_item value="item-2" disabled>
    <.accordion_trigger>Disabled item</.accordion_trigger>
    <.accordion_content>This item cannot be toggled.</.accordion_content>
  </.accordion_item>
  <.accordion_item value="item-3">
    <.accordion_trigger>Another enabled item</.accordion_trigger>
    <.accordion_content>This item can also be toggled.</.accordion_content>
  </.accordion_item>
</.accordion>
Plus/minus icon — vertical line collapses on open Open in playground 

<.accordion id="accordion-single-custom-icon" type="single" collapsible>
  <.accordion_item value="item-1">
    <.accordion_trigger>
      With plus/minus icon
      <:icon>
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0 text-muted-foreground">
          <path d="M5 12h14" />
          <path d="M12 5v14" class="origin-center transition-transform group-data-[state=open]/trigger:scale-y-0" style="transition-duration: var(--accordion-duration, 200ms)" />
        </svg>
      </:icon>
    </.accordion_trigger>
    <.accordion_content>Content with a custom icon.</.accordion_content>
  </.accordion_item>
  <.accordion_item value="item-2">
    <.accordion_trigger>
      Another item
      <:icon>
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0 text-muted-foreground">
          <path d="M5 12h14" />
          <path d="M12 5v14" class="origin-center transition-transform group-data-[state=open]/trigger:scale-y-0" style="transition-duration: var(--accordion-duration, 200ms)" />
        </svg>
      </:icon>
    </.accordion_trigger>
    <.accordion_content>More content here.</.accordion_content>
  </.accordion_item>
</.accordion>
No icon via hide_icon Open in playground 

<.accordion id="accordion-single-no-icon" type="single" collapsible>
  <.accordion_item value="item-1">
    <.accordion_trigger hide_icon>No icon trigger</.accordion_trigger>
    <.accordion_content>Content without an icon on the trigger.</.accordion_content>
  </.accordion_item>
  <.accordion_item value="item-2">
    <.accordion_trigger hide_icon>Another no-icon trigger</.accordion_trigger>
    <.accordion_content>More content here.</.accordion_content>
  </.accordion_item>
</.accordion>