Hi everyone,
We are using accordion functionality in our Help Center a lot. Currently, I'm switching from a CSS/JavaScript-based solution to using <details> and <summary>. It is the most accessible accordion I found and requires nothing else than HTML. And, of course, it is easy to maintain.
The HTML only approach has been discussed here since at least 2017, and in this article, Zendesk is listing <details> and <summary> as supported HTML tags. However, I noticed that the Zendesk source editor removes the ‘name’ attribute, with which <details> elements can be grouped. Within a name group, only a single element will be shown at a time. Here's an example. The accordion can still be used in Zendesk without the ‘name’ attribute, but it is unfortunate to have to do without this useful function.
Steps to reproduce:
- Open the source editor.
- Add ‘name="whatever"’ to a <details> tag so that it reads: < details name="whatever"> (Or simply copy the HTML part of the example.)
- Close the editor.
- Open the editor again.
- The name attribute is gone.
Maybe someone knows a workaround?
Anyway, I would appreciate it if Zendesk could get this right soon.
Cheers,
Georg
Thank you for sharing your detailed observations regarding the use of <details> and <summary> tags in the Zendesk source editor.
You’ve correctly noted that while these HTML elements are supported and provide an accessible way to create accordions, the source editor currently strips out the name attribute from <details> tags upon saving. This removal limits the ability to group multiple <details> elements effectively, which understandably impacts how your content is displayed.
At this time, the source editor’s behavior is due to sanitization rules designed to maintain security and content integrity, which unfortunately also remove certain attributes like name. While there isn’t a direct workaround to preserve the name attribute through the editor, you might consider other grouping methods using JavaScript or CSS as a temporary solution, albeit with additional complexity.
We appreciate your feedback on this limitation. I’ll be sure to pass this along to the product team for consideration in future updates. Improvements to the source editor’s handling of HTML attributes are an important part of enhancing customization and accessibility.
Thank you again for your insights and for being part of the community.