Components Accordion

Accordion

An accordion is a user interface element that expands to expose hidden information. It's great for condensing information on the page and allowing the user to hide or reveal content resulting in a cleaner design aesthetic.

For smooth expand/collapse on static pages, you must install the Alpine.js "collapse" plugin. You can follow the installation instructions here .

Basic accordion

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis. Ut enim ad minim veniam quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis. Ut enim ad minim veniam quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis. Ut enim ad minim veniam quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

          <.accordion class="w-full">
  <:item heading="Accordion">
    <.p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis. Ut enim ad minim veniam quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </.p>
  </:item>

  <:item heading="Accordion 2">
    <.p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis. Ut enim ad minim veniam quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </.p>
  </:item>

  <:item heading="Accordion 3">
    <.p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis. Ut enim ad minim veniam quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </.p>
  </:item>
</.accordion>

        
Dynamic accordion

Content 1

Content 2

          <.accordion
  class="w-full"
  entries={[%{heading: "Item 1", content: "Content 1"}, %{heading: "Item 2", content: "Content 2"}]}
>
  <:item :let={entry}>
    <.p>
      <%= entry.content %>
    </.p>
  </:item>
</.accordion>

        
Properties
          attr(:container_id, :string)
attr(:class, :string, default: "", doc: "CSS class for parent container")
attr(:entries, :list, default: [%{}])

attr(:js_lib, :string,
  default: "alpine_js",
  values: ["alpine_js", "live_view_js"],
  doc: "javascript library used for toggling"
)

attr(:rest, :global)

slot :item, required: true, doc: "CSS class for parent container" do
  attr(:heading, :string)
end