I have a "label" tag inside a "summary" tag. It is not opening the details when clicked on label. How to solve?

Question

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

Answer 1

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>