0

Here is the code I am trying to adapt. It's a css accordion which I want to adapt into a settings form (i.e. there would be various input types etc in it):

https://codepen.io/anon847159/pen/BaQJrpq

Basically the problem is that when you click on the headings to expand the accordion, when you then click on the sub-items, most of them will close the accordion (since the label has 100% height of both the heading & dropdown items). As is noted, you can see that if the content inside is an <a> tag, it's fine (i.e. the accordion does't close, since I guess this is stopping the propagation of the click to the label), but clicking on e.g. a <p> tag, some padding or something causes the accordion to close

I've tried all I can think of an am honestly just bashing my head here. I though setting pointer-events: none on the dropdown section (.contents) would have done it, but it seems not

If anyone knows how to achieve the desired result, then I'd appreciate it :)

SeeEssEss
  • 1
  • 1

1 Answers1

1

Adding preventDefault should work. {:onclick =>"event.preventDefault()"}

.wrapper
  %input{:id => 'pictures',:type => 'checkbox'}
  %label{:for => 'pictures'}
    %p Heading 1
    %div.lil_arrow
    .content
      %ul
        %li
          %p{:onclick =>"event.preventDefault()"} < p > Doesn't work - closes
        %li
          %a{:href => '#'} < a > Works - stays open
    %span
  %input{:id => 'jobs',:type => 'checkbox'}
  %label{:for => 'jobs'}
    %p Heading 2
    %div.lil_arrow
    .content
      %ul
        %li
          %a{:href => '#'} < a > Works - stays open
        %li
          %p < p > Doesn't work - closes
    %span
Vikrant Thete
  • 61
  • 2
  • Thanks man. I just tried this at the exact same too. It works. I tried upvoting your answer, but it seems my account is too new... – SeeEssEss Feb 25 '21 at 08:03