Offer an option for split collapse toggle and content?

[Acccent]

Currently, the collapse component needs a structure like this:

<div class="collapse"> <!-- collapse parent -->
  <div class="collapse-title">Toggle</div> <!-- collapse toggle -->
  <div class="collapse-content "> <!-- collapse content -->
    Content
  </div>
</div>

(This structure is roughly the same regardless of whether we use the focus, checkboxs or details variants.)

It would be useful to be able to put the toggle outside of the parent.
My use case is for navbars, which on mobile often have a lines-button that opens a full-width menu.
See example on bootstrap's documentation

I'd like to suggest adding a way to add this functionality, which would synergize well with daisyUI's own navbar componet. Here's a proposed structure:

<div class="navbar collapse-toggle-parent"> <!-- new collapse part -->
  <div class="navbar-start">
    <a class="btn btn-ghost text-xl">daisyUI</a>
  </div>
  <div class="navbar-end">
    <ul class="menu menu-horizontal hidden lg:flex">
      ...
    </ul>
    <div tabindex="0" role="button" class="lg:hidden collapse-title"> <!-- collapse toggle -->
      ☰
    </div>
  </div>
</div>
<div class="collapse lg:hidden"> <!-- collapse parent -->
  <div class="collapse-content"> <!-- collapse content -->
    <ul class="menu">
      ...
    </ul>
  </div>
</div>
</div>

I think this should be doable without too many changes, essentially in the collapse content source something like this:

 &:is(
      [open],
      [tabindex]:focus:not(.collapse-close),
      [tabindex]:focus-within:not(.collapse-close)
    ),
    &:not(.collapse-close):has(> input:is([type="checkbox"], [type="radio"]):checked),
+ .collapse-toggle-parent:has(.collapse-title:is(:focus, :checked)) + &:not(.collapse-close) {
      grid-template-rows: max-content 1fr;
    }

(Among other changes. Also I haven't tested this at all, just showing how I'd approach it.)
(Another approach would be to require a new parent div, which would be a bit more flexible but require extra markup.)

[pdanpdan]

You mean this?
https://play.tailwindcss.com/jlNn3lr1DZ

[Acccent]

You can see it here: https://secret-lives-of-games-8eaa74.gitlab.io (source: https://gitlab.com/robin-v/secret-lives-of-games/-/blob/main/src/components/NavBar.astro)

Because there's another element that can take focus in the navbar (the search field), it's difficult to control the collapsing menu with just the focus method. Unless I'm missing something?

[pdanpdan]

Yes. The focus method is for simple situations
Do I get it right that what you want is a close on click outside?

[Acccent]

yep! And ideally without JS (I wouldn't have much trouble doing it with JS haha)

[pdanpdan]

I would go with the simple solution of backdrop: https://play.tailwindcss.com/fyhnbUTd6B
Adjusted for your situation: https://play.tailwindcss.com/dGFXouoDnw

[Acccent]

Thanks! that's some pretty nifty css wizardry. I'd suggest putting it on the documentation as an example to be honest, I think it's a fairly common pattern!