Easy HTML5 Details Accordion Sections in Articles

13 Comments

  • Joel Hellman

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

     

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

    0
  • Astha Parmar

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

    0
  • Astha Parmar

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

    1
  • 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">
      $('p').filter(function(){
       return this.innerHTML == '&nbsp;';
    }).remove();
    </script>
    2
  • 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;">

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

    2
  • Jennifer Rowe
    Zendesk Documentation Team

    Good to know. Thanks for sharing this, Anthony!

    0
  • Jan-Hendrik Spieth

    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?

    2
  • Travis Bagby

    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?

    0
  • 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:

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

     

    0
  • Nicole S.
    Zendesk Community Team

    Thanks for sharing, Anthony!

    0
  • 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:

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

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

     

    0

Please sign in to leave a comment.

Powered by Zendesk