How to prevent <details/> to expand/collapse when clicking element inside <summary/>?

Question

In HTML you have the <details/> element which allows you to expand/collapse content inside of it, while the <summary/> tag always remains visible. When you click the <summary/> element (or one of it's children) it expands/collapses the content. Inside of the <summary/> element I have multiple other elements, but not all of them should trigger expand/collapse. I've already tried it with pointer-events: none but without success:

.clickable {
  cursor: pointer;
  background: red;
}

.not-clickable {
  pointer-events: none;
  background: yellow;
}

<details>
  <summary>
    <span class="clickable">Clickable</span>
    <span class="not-clickable">Not Clickable</span>
  </summary>
  Some Content
</details>

Is it possible to prevent one element inside of <summary/> from expanding/collapsing the content of <details/>?

Answer 1

You can achieve it by setting pointer-events: none on summary and set it again on clickable class.

I'm not sure if this is the correct approach, but it works.

summary {
  pointer-events: none;
}

.clickable {
  pointer-events: auto;
  cursor: pointer;
  background: red;
}

.not-clickable{
  background: yellow;
}

<details>
  <summary>
    <span class="clickable">Clickable</span>
    <span class="not-clickable"><a>Not Clickable</a></span>
  </summary>
  Some Content
</details>