Easy HTML5 Details Accordion Sections in Articles

12 Comments

  • Joel Hellman
    Comment actions Permalink

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

     

    0
  • Andrew J
    Comment actions Permalink

    @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
    Comment actions Permalink

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

    0
  • Astha Parmar
    Comment actions Permalink

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

    1
  • Sean Cuevas
    Comment actions Permalink

    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>
    1
  • Anthony Inman
    Comment actions Permalink

    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
    Comment actions Permalink

    Good to know. Thanks for sharing this, Anthony!

    0
  • Jan-Hendrik Spieth
    Comment actions Permalink

    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
    Comment actions Permalink

    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
    Comment actions Permalink

    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 - Community Manager
    Comment actions Permalink

    Thanks for sharing, Anthony!

    0
  • Tim Capone
    Comment actions Permalink

    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

Please sign in to leave a comment.

Powered by Zendesk