Collapsible color transition

[flip111]

The collapse color change transition doesn't look so good. It looked weird at the default transition time of 0.2s but i set it to 2s just to check what was going on.

When element is not focused and closed and then gets a click:

1. collapsible expandable section opens and changes color (this is good)
2. collapsible permanent section changes color after previous animation finished. This is not so good, would be nicer if both sections change colors at the same time.

When element is focused and closed and then gets a click:

• collapsible permanent section keeps the same color (good)
• collapsible expandable section opens and starts in non-focus color and changes to focus color. This is not so good, would be better if there was no color change.

Possibly this can not be done with CSS alone. I think in this case it's better not have separate colors for focus and non-focus by default.

https://daisyui.com/components/collapse

[flip111]

To workaround this effect: on the two inner elements collapse-title and collapse-content the bg color must be set with important (example: !bg-red-400)

[saadeghi]

Fixed in 2.6.0
Now colors are optional.

• You can set default colors for collapse-title and collapse-content
• You can set the color when collapse is open using peer or group utilities.

Custom colors for collapse that works with focus

<div tabindex="0" class="collapse group">
  <div class="collapse-title bg-primary text-primary-content group-focus:bg-secondary group-focus:text-secondary-content">
    Focus me to see content
  </div>
  <div class="collapse-content bg-primary text-primary-content group-focus:bg-secondary group-focus:text-secondary-content"> 
    <p>tabindex="0" attribute is necessary to make the div focusable</p>
  </div>
</div>

Custom colors for collapse that works with checkbox

<div tabindex="0" class="collapse">
  <input type="checkbox" class="peer"> 
  <div class="collapse-title bg-primary text-primary-content peer-checked:bg-secondary peer-checked:text-secondary-content">
    Click me to show/hide content
  </div>
  <div class="collapse-content bg-primary text-primary-content peer-checked:bg-secondary peer-checked:text-secondary-content"> 
    <p>tabindex="0" attribute is necessary to make the div focusable</p>
  </div>
</div>