Easy HTML5 Details Accordion Sections in Articles
We discovered that you can use the HTML5 Details tag to create accordion sections in Help Center Articles. There are some limitations imposed by ZenDesk's editor, but you can work around them. The HTML5 Details tag doesn't need any JavaScript to work and is pretty easy to code. See the link for details.
The limitations: the HC editor will not allow the very first paragraph on a page to be a Details section, as it inserts paragraph tags that defeat the HTML5 tags. The editor will save the Details section as per it's state when you click "Save" ... if the accordion section is open it will remain open after saving. You can collapse and open the sections in the editor.
There are some other oddities; the editor will add paragraph tags to the top each time you save the page, eventually forcing your content down and off the page. I edit the source to correct this.
-
Internet Explorer doesn't support this tag, which seems rather important if this would be for a public facing help center 😓
-
@joel - it might just help people to realise IE is dead. At least IE use is falling finally thanks to Edge. Also if does display the content - so ugly but accessible.
-
@sean - we could not get this to work in either Edge or Chrome. Is this still working for you?
-
Never mind, got it to work - one has to enable show "unsafe content" in settings.
-
This is actually Frank (I work for Sean). IE / Edge combined represents less than 5% of the browsers now, and for our SMB audience it represents as close to zero as you can get. That number would be greater if you are serving Fortune 500 or government customers, where IE 8 is still used, so you will have to check. Edge renders the page with all the sections expanded so at least you can read them.
It works well for us but the editor insists on adding superfluous paragraph tags before the <details> tag each time the article is edited. We inserted this script at the bottom of the Article page template to strip them out when the page is rendered:
<script type="text/javascript">
$('p').filter(function(){
return this.innerHTML == ' ';
}).remove();
</script> -
Hey Guys,
I figured out how to keep the editor from adding the paragraph tags to the top each time you save the page, Just throw
<div class="container;"> around the details tag
<div class="container;">
<details>
<summary>Copyright 1999-2014.</summary>
<p> - by Refsnes Data. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details><p><b>Note:</b> The details tag is not supported in Internet Explorer.</p>
</div>
-
Good to know. Thanks for sharing this, Anthony!
-
Interesting!
I tried this.
It appears the accordion would show in the editor, but not in the final article page the user sees. Checking the page source, it really seemed Zendesk would completely strip the markup from the article - even though it is available in source code view in the editor.
Any ideas as to what I might be doing or getting wrong, anyone?
-
Hello!
I am also finding that the details trick is only showing in the editor, and not in either the preview or the published article.
Any thoughts on how to get this to work?
-
I use this feature all the time. It works great for me. Here is how I have mine set up. I use it for a drop-down language bar in my articles. I have to do all of my CSS inline with HTML to get around restrictions from our IT department. Just remove the CSS Here is a portion of the code:
<div>
<details style="display:block;border-radius:5px;position:absolute;z-index:60;right:200px;box-shadow:1px 1px 6px rgba(0,0,0,.5);margin:-100px;width:15%;background-color:#fff;color:#3f0647">
<summary style="text-align:left;border-radius:5px;background:#5E0063;padding-left:15px;color:white">
<strong>Select a Language</strong>
</summary>
<ul style="width:100%;float:right;color:#3f0647">
<li style="display:block;width:100%;text-align:left;padding:5px;margin:2px">
<a href=""><strong>US-EN</strong></a>
</li>
</ul>
</details>
</div>Here are screen shots to show how it looks in published articles.
Hope this helps,
Tony I
Scentsy Knowledge Base Content Admin.
-
Thanks for sharing, Anthony!
-
You have to enable "Display unsafe content" in the Admin General settings (https://YOURSITEHERE.zendesk.com/hc/admin/general_settings). Scroll down to Security and check this setting on:
-
Thank you so much for this great idea!
Using it for a test article and it looks amazing!I'm trying to create a "open all" button but can't get the details to open- if anyone could point me to what I'm doing wrong that would be such a huge help!
Here's the html:
<button onclick="openAllDet()">Open all</button>
<details class="artDetails" open="">
<///////blah blah>
</details>
Here's the js:
function openAllDet() {
document.getElementsByClassName("artDetails").open = true;
}When I click on the button the details are not opening :(
Also- after opening, do I have to create another part for the function to close everything back for the next person logging in or it will automatically revert back to the original html?
Thank you so so much!!
-
Hi! Thanks for sharing :)
Has anyone had problems with accordions not showing up properly with Google Chrome?
The symbols for the accordions (the triangle in the screenshot below) don't show up in Google Chrome but they're visible in Safari. You can still click the copy in the <summary> tag and see the details, but there's no visual cue to let readers know that it's an accordion/it's clickable. The Display Unsafe Content setting is enabled.
-
M_S - this is the problem I'm currently experiencing. Everything is fine in editor, but when it's published, the visual cue isn't there..
-
Hey EB,
Did you enable Display unsafe content as mentioned in the above comment?
If this isn't enabled in your Guide settings then that can cause issues with HTML showing up correctly outside the article editor.
-
@... Thanks for the response - yes, I did display unsafe content. I had the same issue as @... above.
-
Thanks for getting back to me EB!
Any chance you could share the code you're using so we can take a look?
-
Does anyone know how to get the dropdowns to default as collapsed? Currently they default to expanded when I publish articles.
@...?
Thanks!
Please sign in to leave a comment.
19 Comments