Skip to content
Advertisement

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

JavaScript

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

How can one disable the details element?

Advertisement

Answer

Instead of using the non-existent disabled attribute, you can set a click handler on the <details> element, and prevent the default event behavior from there. Quick and dirty way is:

JavaScript

The proper way to do it would be using addEventListener:

JavaScript

http://jsfiddle.net/L8HUZ/1/

To solve the focus problem you mentioned in the comments, add tabindex="-1" as an attribute of <summary> to prevent it from getting keyboard focus. Please note that I’m not sure if that will work on every browser, and that a focus event will still be triggered on click even with the attribute.

User contributions licensed under: CC BY-SA
1 People found this is helpful
Advertisement