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