Accordion to be able to fully close again

[sidonaldson]

It makes no sense to me but my client insists once the accordion has been interacted with they want it to close again.

I couldn't seem to find a way to do it natively so hacked it like so.

Maybe this could be a feature, even if for v5. Thanks

  // quick hack to close open accordions
  const radioInputs = document.querySelectorAll('.collapse input');
  radioInputs.forEach((item) => {
    const clickListener = (event) => {
      if (event.currentTarget.checked) {
        event.currentTarget.checked = false;
        item.removeEventListener('click', clickListener);
      }
    };
    item.addEventListener('change', () => {
      item.addEventListener('click', clickListener);
    });
    item.addEventListener('blur', () => {
      item.removeEventListener('click', clickListener);
    });
  });

[saadeghi]

Thanks for sharing.

There's CSS focus method (closes when losing focus)
https://daisyui.com/components/collapse/#collapse-with-focus

And checkbox method (each item can be opened/closed independently)
https://daisyui.com/components/collapse/#collapse-with-checkbox

Or with Radio inputs (only one can be open)
https://daisyui.com/components/accordion/#accordion-using-radio-inputs

For checkbox method and radio input method, it works the way HTML checkbox and radio input works. So clicking a checked radio input wont close it. https://play.tailwindcss.com/ib5qw03NOq

But of course you can use JS to control the value or use a reset button to uncheck everything in form…