2

I have checked this question. There is no answer and this question also. But my question is little different here. I am just adding another element inside the summary and clicking on that not opening the details. When I click outside label i.e. Only on summary it works.

Here is my code:

<form action="#" id="">
        <details>
            <summary>
                <label>Filter 1</label>
            </summary>
            <div class="filter-1">
                <input type="checkbox" name="filter-1" value="a">A <br>
                <input type="checkbox" name="filter-1" value="b">B
            </div>
        </details>
    </form>

I am basically trying to show or hide some inputs in details - summary tags.

Note:- The classes and name attributes are just there. There is no code for that.

Expected solutions:

Clicking anything inside summary tag will open details. Thanks in advance

Toto
  • 89,455
  • 62
  • 89
  • 125
Saroj_98
  • 21
  • 4
  • Your code is working https://jsfiddle.net/37tpfka8/ – Amir Saleem May 26 '20 at 05:42
  • 1
    The label tag was not working but div and span tags were working. I have tested it. Click on the label tag itself, you will notice it. But the solution by [Vaibhav](https://stackoverflow.com/users/7972933/vaibhav) works. – Saroj_98 May 28 '20 at 21:27

1 Answers1

3

label element is preventing click on summary. Add pointer-events: none; to label or whatever element you put inside summary.

label {
  pointer-events: none;
}
<form action="#" id="">
  <details>
    <summary>
      <label>Filter 1</label>
    </summary>
    <div class="filter-1">
      <input type="checkbox" name="filter-1" value="a">A <br>
      <input type="checkbox" name="filter-1" value="b">B
    </div>
  </details>
</form>
Vaibhav
  • 1,412
  • 1
  • 10
  • 14
  • Thanks for the Answer, It worked! I have another way of dealing with this, by using a div or span and it works. Any thought about this behaviour ?? – Saroj_98 May 28 '20 at 21:24