Easy HTML5 Details Accordion Sections in Articles

19 Comentários

  • Joel Hellman

    Internet Explorer doesn't support this tag, which seems rather important if this would be for a public facing help center 😓


  • Andrew J
    Community Moderator

    @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.

  • Astha Parmar

    @sean - we could not get this to work in either Edge or Chrome. Is this still working for you?

  • Astha Parmar

    Never mind, got it to work - one has to enable show "unsafe content" in settings.

  • Sean Cuevas

    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">
       return this.innerHTML == '&nbsp;';
  • Anthony Inman

    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;">

    <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>

    <p><b>Note:</b> The details tag is not supported in Internet Explorer.</p>


  • Jennifer Rowe
    Zendesk Documentation Team

    Good to know. Thanks for sharing this, Anthony!

  • Jan-Hendrik Spieth


    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?

  • Travis Bagby


    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?

  • Anthony Inman

    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:

    <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>
    <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>

    Here are screen shots to show how it looks in published articles. 

    Hope this helps, 

    Tony I 

    Scentsy Knowledge Base Content Admin.


  • Nicole Saunders
    Zendesk Community Manager

    Thanks for sharing, Anthony!

  • Tim Capone

    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:

  • Ruthy Licht

    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>



    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!!


  • M_S

    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.

  • Elizabeth Barron

    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..

  • Brett Bowser
    Zendesk Community Manager

    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.

  • Elizabeth Barron

    @... Thanks for the response - yes, I did display unsafe content. I had the same issue as @... above.

  • Brett Bowser
    Zendesk Community Manager

    Thanks for getting back to me EB!

    Any chance you could share the code you're using so we can take a look?

  • Liana Kirkhart

    Does anyone know how to get the dropdowns to default as collapsed? Currently they default to expanded when I publish articles.




Por favor, entrar para comentar.

Powered by Zendesk