Why does Canvas strip the name attribute?

With this HTML-code:

I can create this behavior on a webpage:

But when I copy the code into a Canvas page and save it, the name attribute gets removed and the old section does not close when i click on a new one. I can do it with JavaScript, but why do it when it can be done with simple HTML?

Find more posts tagged with

Instructor

Developers

Accepted answers

All comments

Chris

Hi @JensRohleder,

I don't really know the "why" for this specific one, but I did want to point you to the Canvas HTML Editor Allowlist - Instructure Community article, if you haven't already seen it. That document lists exactly what HTML is allowed in the editor, and anything not allowed will be removed.

-Chris

jeremyfw

Why your original approach doesn’t work in Canvas

In standard HTML, the idea behind:

<details name="accordion">

is to treat multiple <details> elements like a radio group, so opening one closes the others. That behavior is browser-dependent, experimental, and not part of the stable HTML specification in the way many people assume.

Canvas takes a very conservative approach to HTML for security, accessibility, and cross-browser stability. As part of that:

Canvas strips non-whitelisted attributes from HTML elements
The name attribute on <details> is not allowed
JavaScript is completely disallowed in user content
Only “safe” structural and presentational HTML survives

So when Canvas processes your content, it silently removes name="accordion". Once that attribute is gone, each <details> element behaves independently - no accordion behavior, no grouping.

This is working exactly as Canvas intends it to work.

Why the code below does work in Canvas

The following code works because it relies only on:

Native <details> / <summary> behavior (which Canvas allows)
Inline CSS (which Canvas allows)
No JavaScript
No unsupported attributes

Each section opens and closes independently, which is the only accordion-like behavior Canvas reliably supports in rich content areas.

<div style="padding: 5px;">
    <details>
        <summary style="cursor: pointer; padding: 10px; background-color: #cd001a; color: #fff; border-bottom: 2px solid #FFF;"><span style="padding-left: 10px;"><strong>TITLE</strong></span></summary>
        <div style="border: thin solid #F1F3F4; padding: 5px 15px; background-color: #e5e5e5; width: 90%; margin: 0 auto 0;">
            <p><strong>CONTENT</strong></p>
        </div>
    </details>
    <details>
        <summary style="cursor: pointer; padding: 10px; background-color: #ef6a00; color: #fff; border-bottom: 2px solid #fff;"><span style="padding-left: 10px;"><strong>TITLE</strong></span></summary>
        <div style="border: thin solid #F1F3F4; padding: 5px 15px; background-color: #e5e5e5; width: 90%; margin: 0 auto 0;">
            <p><strong>CONTENT</strong></p>
        </div>
    </details>
    <details>
        <summary style="cursor: pointer; padding: 10px; background-color: #f2cd00; color: #fff; border-bottom: 2px solid #fff;"><span style="padding-left: 10px;"><strong>TITLE</strong></span></summary>
        <div style="border: thin solid #F1F3F4; padding: 5px 15px; background-color: #e5e5e5; width: 90%; margin: 0 auto 0;">
            <p><strong>CONTENT</strong></p>
        </div>
    </details>
    <details>
        <summary style="cursor: pointer; padding: 10px; background-color: #79c300; color: #fff; border-bottom: 2px solid #fff;"><span style="padding-left: 10px;"><strong>TITLE</strong></span></summary>
        <div style="border: thin solid #F1F3F4; padding: 5px 15px; background-color: #e5e5e5; width: 90%; margin: 0 auto 0;">
            <p><strong>CONTENT</strong></p>
        </div>
    </details>
    <details>
        <summary style="cursor: pointer; padding: 10px; background-color: #1961ae; color: #fff; border-bottom: 2px solid #fff;"><span style="padding-left: 10px;"><strong>TITLE</strong></span></summary>
        <div style="border: thin solid #F1F3F4; padding: 5px 15px; background-color: #e5e5e5; width: 90%; margin: 0 auto 0;">
            <p><strong>CONTENT</strong></p>
        </div>
    </details>
    <details>
        <summary style="cursor: pointer; padding: 10px; background-color: #61007d; color: #fff; border-bottom: 2px solid #fff;"><span style="padding-left: 10px;"><strong>TITLE</strong></span></summary>
        <div style="border: thin solid #F1F3F4; padding: 5px 15px; background-color: #e5e5e5; width: 90%; margin: 0 auto 0;">
            <p><strong>CONTENT</strong></p>
        </div>
    </details>
</div>

The key takeaway

Canvas supports progressive disclosure, not true accordions.

<details> / <summary> → ✅ supported
Inline CSS → ✅ supported
Grouping behavior via name or JS → ❌ stripped or blocked

If you need “only one section open at a time,” that requires JavaScript - and Canvas will not allow it in user-authored content.

JensRohleder

The name attribute in the details element is part of the HTML Standart: https://html.spec.whatwg.org/multipage/interactive-elements.html#the-details-element

And is supported by all major browsers: https://caniuse.com/mdn-api_htmldetailselement_name%2Cmdn-html_elements_details_name

Unanswered Questions

Dropped Scores
I have Canvas set to drop the lowest quiz score, however, my students can only barely tell that the grade text is slightly grey when dropped. Can it have a tag like the "missing" and "exempt" ones in the student gradebook?
Batch edit assignment due dates by section
My Canvas shell has three different sections that all meet at different times throughout the week. I need to be able to batch edit assignment due dates by section, but right now Canvas can't filter by section for batch edit. My only option is now to manually (tediously) edit due dates for each assignment individually.
Change Group Assignments to NOT save if no groups are selected
Morning! One of the more frustrating aspects of Canvas are groups and the issues that show up when copying courses that have them. But now we have yet another issue. Most recently we have had instances where people mark an assignment/discussion as a group assignment but then do not link the discussion or assignment to any…
Has anyone experienced the "Empty Course" page for Speedgrader, when there actually are students assigned and active on the assignment?
So, we have encountered a few assignments where the Speedgrader presents the teacher with the "Empty Course" page, even though the course is not empty. I have discovered two New Quizzes in the same course where this has occurred, despite multiple students being assigned (at Module level, which passes the permission down to…
Problems with grading since update
A teacher has expressed concerns with the recent update. Exact concern is as follows: "My Canvas has been acting glitchy since the last "update." For instance, when I grade essays the highlight and cursor tools do not always work. I have to try highlighting several times,or come back later to finish. It's told me I "ran…