HTML Summary tag in IE

Question

Is there any way to use the summary tag in Internet Explorer (version 11) (an external library for example).

    <details>
    <summary>This is a summary.</summary>
    <p>bla bla bla</p>
    </details>    

Thanks in advance.

Answer 1

You have to make them work yourself, since IE doesn't support them.

You can feature-detect details / summary like this:

if (typeof HTMLDetailsElement === "undefined") {
    // No, not intrinsically supported
}

If they aren't intrinsically supported, in order to style them, you'll need to tell IE they exist, which you can do by simply creating and throwing them away:

document.createElement("details");
document.createElement("summary");

Then (again only if not intrinsically supported) add some styling for them:

// JUST A ROUGH SKETCH
var style = document.createElement("style");
style.textContent = 
    "details > :not(summary) {\n" +
    "    display: none;\n" +
    "}\n" +
    "details.showing > :not(summary) {\n" +
    "    display: block;\n" +
    "}\n";
document.querySelector("head").appendChild(style);

Of course, not all elements that will be within details will normally have display: block , so you'll have to tweak that. (For instance, you might use a div for all the non- summary content.) You may also want to add an arrow on the left or something so it's similar to how Chrome and Firefox render these.

Atypically , you'll want the code doing the above to be before the body element to avoid a flash of unstyled content.

Then respond to clicks on details elements and space/enter keypresses on them by toggling the showing class that styling defines:

// AGAIN: THIS IS A ROUGH SKETCH
document.addEventListener("click", detailsHandler);
document.addEventListener("keypress", detailsHandler);
function detailsHandler(e) {
    if (e.type === "keypress" && [13, 32].indexOf(e.which || e.keyCode) === -1) {
        return;
    }
    var el = e.target;
    while (el && el.tagName !== "DETAILS") {
        if (el.tagName === "BODY") {
            el = null;
            break;
        }
        el = el.parentNode;
    }
    if (el) {
        el.classList.toggle("showing");
    }
}

This code doesn't have to be before body , it can be in your normal location. But as it's conceptually part of the initial bit, it may make sense to put it there.

Then ensure that you use tabindex="0" on both details and summary so that IE will include them in the tab order:

<details tabindex="0">
<summary tabindex="0">This is a summary.</summary>
<p>bla bla bla</p>
</details> 

Live example:

 <!-- In the head element --> <script> (function() { if (typeof HTMLDetailsElement === "undefined") { // Tell IE they exist document.createElement("details"); document.createElement("summary"); document.addEventListener("click", detailsHandler); document.addEventListener("keypress", detailsHandler); var style = document.createElement("style"); style.textContent = "details > :not(summary) {\\n" + " display: none;\\n" + "}\\n" + "details.showing > :not(summary) {\\n" + " display: block;\\n" + "}\\n"; document.querySelector("head").appendChild(style); } function detailsHandler(e) { if (e.type === "keypress" && [13, 32].indexOf(e.which || e.keyCode) === -1) { return; } var el = e.target; while (el && el.tagName !== "DETAILS") { if (el.tagName === "BODY") { el = null; break; } el = el.parentNode; } if (el) { el.classList.toggle("showing"); } } })(); </script> <!-- End of in the head element --> <!-- In body --> <details tabindex="0"> <summary tabindex="0">This is a summary.</summary> <p>bla bla bla</p> </details>

Answer 2

As mentioned, IE11 does not support summary/detail. For those just finding this, here are some polyfills you can try using to support IE11:

• https://github.com/javan/details-element-polyfill
• https://github.com/mathiasbynens/jquery-details