If the accordion is not responding on a click

[aykyiv]

So the thing with not responsible accordion when you click on it in my case is that some other tailwind component has a higher order width value of input radio than the daisy`s accordion, the exact size for the accordion in SCSS will help.

[davidlbean]

Oh, wow...been fighting with this for hours now. Thank you @Areyall for adding this here. In my case, I had to force the width of the input element to ensure it covered the entire width of the containing div. Without that, my actual clickable area was a tiny portion on the left side. In case this helps anyone else, note 'w-full' in the code below (it's haml):

%div.bg-blue-100.join.join-vertical
  %div.collapse.collapse-plus
    %input.w-full{ type: 'radio', name: 'accordion-1', checked: 'checked' }
    %div.collapse-title
      one
    %div.collapse-content
      some sltuasldkfj
      alsdkjfasdl;fjk
      ;alskdjfal;sdkfj
      ;alsdkjfa;lsdfj
  %div.collapse.collapse-plus
    %input.w-full{ type: 'radio', name: 'accordion-1' }
    %div.collapse-title
      two
    %div.collapse-content
      some sltuasldkfj
      alsdkjfasdl;fjk
      ;alskdjfal;sdkfj
      ;alsdkjfa;lsdfj
  %div.collapse.collapse-plus
    %input.w-full{ type: 'radio', name: 'accordion-1' }
    %div.collapse-title
      three
    %div.collapse-content
      some sltuasldkfj
      alsdkjfasdl;fjk
      ;alskdjfal;sdkfj
      ;alsdkjfa;lsdfj

 

[saadeghi]

The input covers the whole area using a a grid.
But if you're having another CSS in your page that is applying styles to all inputs, that's or course a higher CSS specificity and it creates a conflict with daisyUI style (or any other component library)

[rsessine]

Thank you for helping on this.