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.
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.
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") do |collapse|
- collapse.with_title(css: "collapse-title bg-base-300") do
.flex.gap-x-2.items-center
= heroicon("user-circle", class: "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.