Disable details/summary

Issue

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?

Solution

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:

<details open onclick="return false">
    <summary>Click here</summary>
    <p>content</p>
</details>

The proper way to do it would be using addEventListener:

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

<script>
document.getElementById('mydetails').addEventListener('click', function(e) {
    e.preventDefault();
});
</script>

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.

Answered By - bfavaretto