Expandable/collapsible content containers with smooth animations. Perfect for FAQs, nested content, and progressive disclosure of information with customizable styling and icons.
Collapses are transparent by default and add additional padding.
.mx-auto{ class: "w-[400px]" }
= daisy_collapse(title: "Click to Open") do |collapse|
This is the content of the collapse.
You can apply the collapse-arrow or collapse-plus CSS modifiers
directly to each collapse.
.flex.flex-col.gap-4{ class: "w-[400px]" }
= daisy_collapse(title: "Click to Open", css: "bg-base-100 border border-base-300 collapse-arrow") do |collapse|
This is the content of the arrow collapse.
= daisy_collapse(title: "Click to Open", css: "bg-base-100 border border-base-300 collapse-plus") do |collapse|
This is the content of the plus collapse.
The details option renders DaisyUI's native <details> /
<summary> flavor: no JavaScript or hidden input, keyboard-accessible
out of the box, and programmatic control via the standard open
property — handy for auto-expanding matching cards while filtering a
list. Interactive elements near the title also stay clickable, since
there is no invisible checkbox overlay. Use open: true to start
expanded.
open
attribute.
open
attribute.
.flex.flex-col.gap-4{ class: "w-[400px]" }
= daisy_collapse(details: true, title: "Click to Open", css: "bg-base-100 border border-base-300 collapse-arrow") do |collapse|
This is the content of the details collapse.
= daisy_collapse(details: true, open: true, title: "Starts Open", css: "bg-base-100 border border-base-300 collapse-plus") do |collapse|
This one renders with the native
%code open
attribute.
You can also customize the collapse with any HTML you desire!
.mx-auto{ class: "w-[400px]" }
= daisy_collapse(css: "collapse-arrow bg-base-200 border border-base-300", title_css: "bg-base-300") do |collapse|
- collapse.with_title do
.flex.gap-x-2.items-center
= loco_icon("user-circle", css: "size-6")
%strong User Profile
.mt-4.flex.gap-x-4.items-center
= daisy_avatar(src: image_path("avatars/lady-smiling-1.jpg"))
%div
.text-xl.font-bold Jane Oliver
.italic jane@oliver.test
Create virtual credit / debit cards to keep your real info safe.
Get $5 when you sign up — free to start!
Everything you need to grow your business with confidence!
CRM, Lead Generation, Project Management, Contracts, Online Payments, and more!
The ads above are affiliate links to products I regularly use and highly
recommend.
I may receive a commission if you decide to purchase.