'Disable details/summary

When I use the new details tag in combination with a summary I would then like to disable the generated input. I thought that

<details open disabled>

could do the trick, but sadly it doesn't work.

How can one disable the details element?

javascripthtmlcss


Solution 1:[1]

A very simple way would be to use only CSS. You can still use the disabled attribute or make it a class instead if you would prefer. The pointer-events declaration when set to none makes the summary tag invisible to mouse (elements below the tag would thus be clickable.) Added tabindex="-1" to the summary tags for the disabled ones to eliminate keyboard focus.

<details open disabled>
  <summary tabindex="-1">click here: [disabled]</summary>
  <p>content</p>
</details>

<details open class="disabled">
  <summary tabindex="-1">click here: .disabled</summary>
  <p>content</p>
</details>

<details open>
  <summary>click here: NOT disabled</summary>
  <p>content</p>
</details>

<style>
  details[disabled] summary,
  details.disabled summary {
    pointer-events: none; /* prevents click events */
    user-select: none; /* prevents text selection */
  }
</style>

https://codepen.io/joelnagy/pen/MWKNGGp

Solution 2:[2]

I guess you can return false to prevent the default behaviour:

<details open="" onclick="return false;">
<p>Hello</p></details>

Solution 3:[3]

I had the same problem but needed an angular 7 solution. So in my template I set the details tag as follows:

<details open (click)="preventAction()">
....
</details>

Then wrote the method in my component like so

  preventAction(): boolean {
    return false;
  }

Solution 4:[4]

<details class="mydetails" open>
<summary>Click here</summary>
<p>content</p></details>

$(".mydetails").click(function(event) {event.preventDefault();});

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Akhil Sekharan
Solution 3 Ken
Solution 4 Jesús Loreto

Related Questions