Allow the 'collapse' component to have a default-open + make collapse-arrow clickable

[willemmulder]

We use the 'collapse' component (amongst others), which works great!

However we'd very happy with two additional features:

• Allowing for a default-open? Right now, it is always default-closed, but we actually like to have it default-open.
• Make the collapse-arrow (and plus sign) clickable when using checkbox. Right now, the 'top bar' is clickable, but the actual collapse-arrow and plus sign is not...

Thanks! :-)

[saadeghi]

@willemmulder

1. You can use the checkbox and if the checkbox is checked by default, collapse will be open by default:

<div class="collapse w-96">
  <input type="checkbox" checked> 
  <div class="collapse-title text-xl font-medium">I'm open by default</div> 
  <div class="collapse-content"> 
    <p>Collapse content reveals with focus. If you add a checkbox, you can control it using checkbox instead of focus. Or you can force-open/force-close using collapse-open and collapse-close classes.</p>
  </div>
</div> 

2. I will fix the arrow click this weekend.

[willemmulder]

Hi @saadeghi Thanks for the response and quick action!

1. Ah makes so much sense; should have seen that myself ;-)
2. Great! Hopefully a 'pointer-events: none;' on the arrow/plus-sign might do the trick?

Thanks again, and have a good weekend for now!

[willemmulder]

Thanks, great!