Accordion

An accordion is a vertically stacked set of interactive headings that can expand/collapse to reveal associated sections of content.

items = [
  %{
    title: "Description",
    content: ~S"""
    Elixir is a functional, concurrent, general-purpose programming language that
    runs on the BEAM virtual machine which is also used to implement the Erlang programming language.
    """
  },
  %{
    title: "Popularity",
    content: ~S"""
    According to the Stack Overflow Developer Survey, since its release back in 2011,
    Elixir has become the most loved programming language.
    """
  },
  %{
    title: "Features",
    content: ~S"""
    Scalability, fault-tolerance, interactive development, metaprogramming
    """
  }
]

assigns = assign(assigns, items: items)

<Display.accordion
  :let={api}
  class="block w-64 md:w-96 bg-white rounded-md overflow-hidden"
  items={@items}
>
  <div :for={item <- api.items} {item.container_attrs}>
    <h2>
      <button
        class={[
          "flex items-center justify-between w-full p-4 text-sm text-slate-700 text-left ui-open:font-medium",
          "border border-gray-200 hover:bg-gray-100"
        ]}
        {item.trigger_attrs}
      >
        <span><%= item.title %></span>
        <Heroicons.chevron_down class="w-4 h-4 ui-open:rotate-180 shrink-0 transition duration-300" />
      </button>
    </h2>

    <div
      class="overflow-hidden ui-open:animate-slide-down ui-closed:animate-slide-up"
      {item.panel_attrs}
    >
      <p class="px-4 py-2 text-sm text-gray-500">
        <%= item.content %>
      </p>
    </div>
  </div>
</Display.accordion>

Setup

To use the accordion component, you’ll have to import Accordion and Collapsible modules in your assets/app.js.

import { createSproutConfig, Accordion, Collapsible } from "sprout-ui";

const { initComponents, handleDomChange } = createSproutConfig({
  components: [Collapsible(), Accordion()],
});

Anatomy

<sp-accordion>
  <div data-part="container" data-state="open | closed">
    <button data-part="trigger">title</button>
    <div data-part="panel">
      <p>content</p>
    </div>
  </div>
</sp-accordion>

container: the container for each accordion item
trigger: the trigger for the accordion item
panel: the content area revealed by clicking the trigger

Under the hood, all the slot contents are rendered inside a sp-accordion custom element.

Be cautious that the container must be a div tag because internally it is actually a customized builtin element.

Attributes

Attribute	Type	Description
`items`	`:list`	A list of map that served as the accordion item data
`allow_multiple`	`:boolean`	Allow multiple item open at the same time, default to `false`
`on_item_open`	`JS`	JS commands executed when an item opened
`on_item_close`	`JS`	JS commands executed when an item closed
`rest`	`:global`	Global attributes to be passed to the `sp-accordion` element

API

API	Description
`items`	A mutated list of items that is originally passed to the component

For each item, you’ll have access to the fowllowing API fields besides your original map values:

API	Description
`index`	Index of the current item
`container_attrs`	Attributes to be passed to container part
`trigger_attrs`	Attributes to be passed to trigger part
`panel_attrs`	Attributes to be passed to panel part

Here’s a simplified example showing how you can rendering accordion items:

items = [
  %{title: "...", content: "..."},
  %{title: "...", content: "..."},
  %{title: "...", content: "..."}
]

<Display.accordion
    :let={api}
    items={@items}
  >
    <div :for={item <- api.items} {item.container_attrs}>
      <button {item.trigger_attrs}><%= item.title %></button>
      <div {item.panel_attrs}><%= item.content %></div>
    </div>
  </Display.accordion>

Animation

See Collapsible - Animation.

Accessibility

When focus is on the accordion item trigger, press Enter or Space to toggle the current item, or use Up Down Home End to navigate throught accordion items.