Collapses

Here are some simple collapse examples.

Basic Collapse

Collapses are transparent by default and add additional padding.

Click to Open

This is the content of the collapse.

= daisy_collapse(title: "Click to Open") do |collapse|
  This is the content of the collapse.

Arrow & Plus Collapses

You can apply the collapse-arrow or collapse-plus CSS modifiers directly to each collapse.

Preview

Click to Open

This is the content of the arrow collapse.

Click to Open

This is the content of the plus collapse.

Code

.flex.flex-col.gap-4{ class: "w-[400px]" }
  = daisy_collapse(title: "Click to Open", css: "bg-base-100 border border-gray-200 collapse-arrow") do |collapse|
    This is the content of the arrow collapse.

  = daisy_collapse(title: "Click to Open", css: "bg-base-100 border border-gray-200 collapse-plus") do |collapse|
    This is the content of the plus collapse.

Advanced Collapse

You can also customize the collapse with any HTML you desire!

Preview

User Profile

Jane Oliver

jane@oliver.test

Code

= daisy_collapse(css: "collapse-arrow bg-gray-100") do |collapse|
  - collapse.with_title(css: "collapse-title bg-gray-300") do
    .flex.gap-x-2.items-center
      = heroicon_tag("user-circle", class: "h-6 w-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

Made with by Profoundry .