Internet Explorer's support for the `<summary>` tag in HTML

Question

Internet Explorer's support for the `<summary>` tag in HTML

Is there a method to enable the summary tag in Internet Explorer 11, such as using an external library?

    <details>
    <summary>Here is the summary.</summary>
    <p>Lorem ipsum dolor sit amet</p>
    </details>

Appreciate your help.

javascript html css internet-explorer

Answer 1

Answer №1

If you want to use the details and summary elements in Internet Explorer, you'll have to do some extra work because IE doesn't support them by default.

You can check if details and summary are supported using feature detection like this:

if (typeof HTMLDetailsElement === "undefined") {
    // Not supported
}

If not supported, you can create and immediately remove these elements in order to style them:

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

After that, add some CSS styling for these elements:

// Basic styling example
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);

Additionally, since not all content within details defaults to display: block, you may need to customize the styling further. You can also consider adding visual cues like arrows for better consistency with other browsers.

It's important to place this code before the body element to prevent any unstyled content flashing on the page initially.

To handle user interactions, such as clicks and keypresses, for details elements, toggle a class based on the specific styling defined earlier:

// Rough event handling logic
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 snippet doesn't necessarily have to be placed before body, but it might make organizational sense to keep it together with the initial setup.

Finally, remember to include tabindex="0" attributes on both details and summary elements to ensure they are accessible via keyboard navigation in IE:

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

Check out the live example below for an illustration of how to implement this workaround in your code:

<!-- In the head element -->
<script>
(function() {
    if (typeof HTMLDetailsElement === "undefined") {
        // Detect non-support and enable
        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

If you want to use the details and summary elements in Internet Explorer, you'll have to do some extra work because IE doesn't support them by default.

You can check if details and summary are supported using feature detection like this:

if (typeof HTMLDetailsElement === "undefined") {
    // Not supported
}

If not supported, you can create and immediately remove these elements in order to style them:

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

After that, add some CSS styling for these elements:

// Basic styling example
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);

Additionally, since not all content within details defaults to display: block, you may need to customize the styling further. You can also consider adding visual cues like arrows for better consistency with other browsers.

It's important to place this code before the body element to prevent any unstyled content flashing on the page initially.

To handle user interactions, such as clicks and keypresses, for details elements, toggle a class based on the specific styling defined earlier:

// Rough event handling logic
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 snippet doesn't necessarily have to be placed before body, but it might make organizational sense to keep it together with the initial setup.

Finally, remember to include tabindex="0" attributes on both details and summary elements to ensure they are accessible via keyboard navigation in IE:

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

Check out the live example below for an illustration of how to implement this workaround in your code:

<!-- In the head element -->
<script>
(function() {
    if (typeof HTMLDetailsElement === "undefined") {
        // Detect non-support and enable
        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 3

Answer №2

If you're dealing with IE11's lack of support for summary/detail elements, fear not! Here are a couple of polyfills that might help:

Answer 4

If you're dealing with IE11's lack of support for summary/detail elements, fear not! Here are a couple of polyfills that might help:

Internet Explorer's support for the `<summary>` tag in HTML

Answer №1

Answer №2

Similar questions

Utilizing Local Storage in Vuex Store with Vue.js

Using JQUERY to store the ID of a div along with its checked value in a multidimensional array

Is my directive not displaying the desired content on the HTML page?

I'm unsure of the most efficient way to condense this statement

When should one close a custom-built jQuery dropdown menu?

Ensuring Proper Tabulator Width Adjustment Across All Browser Zoom Levels

Removing multiple data rows in JSP using AJAX by selecting check boxes

HTML checkbox utilizing JavaScript

Choosing only those elements that are not children of parents with a specific class by utilizing the `.not()` method

Animating a div in CSS3 to expand horizontally from left to right without affecting its original position

When attempting to upload a picture using the camera, the file upload process is unsuccessful

Using jQuery's slideToggle feature to hide content when clicked again or when a different button is

What is the best way to send multiple responses from an Express server using res.write and execute a specific action after each write operation?

Tips on saving Firebase Storage image url in Firebase database?

Issue: ENOENT - The specified file or directory, './views/s.ejs', does not exist in Node.js Express

Retrieve the webpage content (including any iframes) using a Firefox plugin

Copy data from JSON file to Vue2 Google Maps markers

Implement pagination for API calls within a React Component

Ensuring proper alignment within anchor links and buttons

Trouble with value updating in PostgreSQL with NodeJs