Solution 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>

Problem :

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 detailssummary 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

Comments

Comment posted by jsfiddle.net/37tpfka8

Your code is working

Comment posted by Vaibhav

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

Comment posted by Saroj_98

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 ??

By

Leave a Reply

Your email address will not be published. Required fields are marked *