Tip: Collapsible headers in articles or templates (accordions)

127 Comments

  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Hi Alyssa :),

    I just checked the accordions on all screens -

     

    380px:

     

     

     

    768px:

     

     

    1024px:

     

     

     

    You can adjust the width of accordion wrapper using the class name, add code to your style.css file.

    .accordion-div { width: 70%; }

    @media(min-width:1024px){
    .accordion-div { width: 100%; }
    }



    Screenshot:



    Note: width can be 80%, 50%, 75%, ...
    min-width:1024px - can be 768px or any ....

     

    Or if you are facing any issue with your theme then share screenshot to get exact solution.

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    @Alyssa, for your second query:

     

    I'm using collapsible headers in articles. I want to create a table of contents at the top of the article that links to each collapsible header. When the reader clicks on a link, I want them to be taken to the section with the panel expanded. Hope that makes sense! 

    Yes, it's possible. 

    Create TOC for your articles, add code for the accordions, and then add the accordion panel ID to TOC links:

    Accordion Panel
    <p id="accordion-panel-one">Lorem ipsum dolet amet...</p>

    TOC Link
    <a href="#accordion-panel-one">TOC Link One</a>

    Try this once :)

    Thank You

    Team

     

     

     

     

    0
  • Sunny Tripathi

    Ifra Saqlain Thanks for all of your helpful replies in this thread. 

    Once you collapse a header, the "-" isn't reverting back to "+". Thoughts?

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Sunny Tripathi

    Update the script.js file code:

    Current Code:

    var acc = document.getElementsByClassName("accordion");
    var i;

    for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function() {

    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      let active = document.querySelectorAll(".accordion-div .accordion.active");
      for(let j = 0; j < active.length; j++){
        active[j].classList.remove("active");
        active[j].nextElementSibling.style.maxHeight = null;
      }
      this.classList.toggle("active");
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
    });
    }

     

    Updated Code:

    var acc = document.getElementsByClassName("accordion");
    var i;

    for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function() {

    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      this.classList.toggle("active");
      panel.style.maxHeight = null;
    } else {
      let active = document.querySelectorAll(".accordion-div .accordion.active");
      for(let j = 0; j < active.length; j++){
        active[j].classList.remove("active");
        active[j].nextElementSibling.style.maxHeight = null;
      }
      this.classList.toggle("active");
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
    });
    }


    Screenshot for the same:
    0
  • Kristin Lisson

    I've added all of the code and (including the script.js). I see the panels in my article preview, but nothing will expand. There are no errors in my console. Any troubleshooting tips I can try?

    1
  • Alyssa

    Hi Ifra Saqlain

    Thank you for all of your help!

    I was able to get the headers to be mobile-responsive. I tried your suggestion of adding an id to the panel, and the link in the TOC leads to the area of the panel, however it doesn't expand (show) it. It still seems to be hidden. 

    Here is the script.js that I'm using:

    var acc = document.getElementsByClassName("accordion");
    var i;

    for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function() {

    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
      this.classList.toggle("active");
    } else {
      let active = document.querySelectorAll(".accordion-div .accordion.active");
      for(let j = 0; j < active.length; j++){
        active[j].classList.remove("active");
        active[j].nextElementSibling.style.maxHeight = null;
      }
      this.classList.toggle("active");
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
    });
    }

    And here's the snippet from the article's source code:

    <div class="callout">
      If you need help deleting your account, please visit this guide:
      <a href="/hc/en-us/articles" target="_blank" rel="noopener">Delete my account</a>
    </div>
    <ul>
      <li>
        <a href="#desktop">I'm on a desktop device</a>
      </li>
      <li>I'm using the app</li>
      <li>I'm using the mobile web</li>
      <li>Frequently asked questions&nbsp;</li>
    </ul>
    <div class="accordion">
      <h2>How to cancel on desktop</h2>
    </div>
    <div id="desktop" class="panel">
      <ol>
        <li>
          <strong><span style="font-weight: 400;">Click the </span>Settings<span style="font-weight: 400;"> link from the left sidebar navigation</span></strong>
        </li>
    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Hey Alyssa,

    Follow the below steps to get the open accordion panel after clicking on TOC link:-

    i). HTML  -

     <h2 class="accordion">Section One</h2>
    <div id="panel-one" class="panel" style="">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <h2 class="accordion">Section Two</h2>
    <div id="panel-two" class="panel">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <h2 class="accordion active">Section Three</h2>
    <div id="panel-three" class="panel" style="">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <h2 class="accordion">Section Four</h2>
    <div id="panel-four" class="panel">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>


     

    ii). JS code -

      var acc = document.getElementsByClassName("accordion");
      var i;

      for (i = 0; i < acc.length; i++) {
        acc[i].addEventListener("click", function() {

        var panel = this.nextElementSibling;
        if (panel.style.maxHeight) {
          this.classList.toggle("active");
          panel.style.maxHeight = null;
           } else {
          let active = document.querySelectorAll(".accordion-div .accordion.active");
          for(let j = 0; j < active.length; j++) {
            active[j].classList.remove("active");
            active[j].nextElementSibling.style.maxHeight = null;
          }
          this.classList.toggle("active");
          panel.style.maxHeight = panel.scrollHeight + "px";
        }
        });
      }

      var _w = $('li > a[href="#panel-one"]');
      var _x = $('li > a[href="#panel-two"]');
      var _y = $('li > a[href="#panel-three"]');
      var _z = $('li > a[href="#panel-four"]');
      
      $(_w).click(function() {
        $("#panel-one").css("maxHeight","100%");
       
      })
      
       $(_x).click(function() {
       $("#panel-two").css("maxHeight","100%");
      })
      
       $(_y).click(function() {
        $("#panel-three").css("maxHeight","100%");
      })
      
       $(_z).click(function() {
        $("#panel-four").css("maxHeight","100%");
      })
    });

     

    iii). Add this TOC links to article page not for all articles, only for that for which you added accordion.

    article_page.hbs

     {{#is article.id 1111111111}}
                 <ul id="tocc">
                   <li>
                     <a href="#panel-one">Section One</a>
                   </li>
                   <li>
                     <a href="#panel-two">Section Two</a>
                   </li>
                   <li>
                     <a href="#panel-three">Section Three</a>
                   </li>
                   <li>
                     <a href="#panel-four">Section Four</a>
                   </li> 
                </ul>
               {{/is}}



    Note: Remove this given article id 1111111111 and add you article id where you added accordion.

    Screenshot for the same:


     

    Thanks

    Team Diziana

    0
  • Elizabeth Barron

    I just switched to Copenhagen v2 theme and copied over the style.css and script.js additions from here for accordions (which worked so well in v1) but now they won't expand. Help?

    style.css: 

    .accordion {
      background-color: #eee;
      color: #444;
      cursor: pointer;
      padding: 12px;
      width: 100%;
      border: none;
      text-align: left;
      outline: none;
      font-size: 15px;
      transition: 0.4s;
      margin-bottom: 10px;
    }

    .accordion p {
      display: inline;
    }

    .active, .accordion:hover {
      background-color: #ccc;
    }

    .accordion:after {
      content: '\002B';
      color: #777;
      font-weight: bold;
      float: right;
      margin-left: 5px;
    }

    .active:after {
      content: "\2212";
    }

    .panel {
      padding: 0 18px;
      background-color: white;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.2s ease-out;
    }
    .accordion-div { width: 90%; }

    @media(min-width:1024px){
    .accordion-div { width: 100%; }
    }

    script.js:

    document.addEventListener('DOMContentLoaded', function() {
      var acc = document.getElementsByClassName("accordion");
      var i;

      for (i = 0; i < acc.length; i++) {
        acc[i].addEventListener("click", function() {
          var panel = this.nextElementSibling;
          if (panel.style.maxHeight) {
            this.classList.toggle("active");
            panel.style.maxHeight = null;
          } else {
            let active = document.querySelectorAll(".accordion-div .accordion.active");
            for(let j = 0; j < active.length; j++){
              active[j].classList.remove("active");
              active[j].nextElementSibling.style.maxHeight = null;
            }
            this.classList.toggle("active");
            panel.style.maxHeight = panel.scrollHeight + "px";
          }
        });
      }
    });
    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Hi Elizabeth Barron, I just tried the code you provided above  in the latest Copenhagen Theme and accordion is working fine, can you share the URL of your HC?  I think there is something missing or any kind of issue in the console, you can check in your console as well.

    0
  • Elizabeth Barron

    Ifra Saqlain our HC isn't public, so I'm not sure the URL will be of use. Can you tell me what to look for? Or what additional information I can provide you? 

    Also, for context, I just downloaded the Copenhagen v2 and was adding the script.js and style.css info from above and testing in "preview." I made the new theme "live" and still had issues, so I switched back to our legacy theme.

    Thanks!

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    @Elizabeth Barron, do just one thing, go the preview mode of your theme > right click > click on "inspect" in the list > go to "console" tab > is there any red color issue. If yes, copy that and share.

     

     

    Points:

    HTML for article source code:

    <h2 class="accordion">Section One</h2>
    <div id="panel-one" class="panel" style="">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <h2 class="accordion">Section Two</h2>
    <div id="panel-two" class="panel">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <h2 class="accordion active">Section Three</h2>
    <div id="panel-three" class="panel" style="">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <h2 class="accordion">Section Four</h2>
    <div id="panel-four" class="panel">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

     

    script.js code, add it to the bottom of the file:

    document.addEventListener('DOMContentLoaded', function() {
      var acc = document.getElementsByClassName("accordion");
      var i;

      for (i = 0; i < acc.length; i++) {
        acc[i].addEventListener("click", function() {
          var panel = this.nextElementSibling;
          if (panel.style.maxHeight) {
            this.classList.toggle("active");
            panel.style.maxHeight = null;
          } else {
            let active = document.querySelectorAll(".accordion-div .accordion.active");
            for(let j = 0; j < active.length; j++){
              active[j].classList.remove("active");
              active[j].nextElementSibling.style.maxHeight = null;
            }
            this.classList.toggle("active");
            panel.style.maxHeight = panel.scrollHeight + "px";
          }
        });
      }
    });

     

    style.css file code:

    .accordion {
      background-color: #eee;
      color: #444;
      cursor: pointer;
      padding: 12px;
      width: 100%;
      border: none;
      text-align: left;
      outline: none;
      font-size: 15px;
      transition: 0.4s;
      margin-bottom: 10px;
    }

    .accordion p {
      display: inline;
    }

    .active, .accordion:hover {
      background-color: #ccc;
    }

    .accordion:after {
      content: '\002B';
      color: #777;
      font-weight: bold;
      float: right;
      margin-left: 5px;
    }

    .active:after {
      content: "\2212";
    }

    .panel {
      padding: 0 18px;
      background-color: white;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.2s ease-out;
    }
    .accordion-div { width: 90%; }

    @media(min-width:1024px){
    .accordion-div { width: 100%; }
    }
    0
  • Elizabeth Barron

    Ifra Saqlain I created a test article with the html you provided and ensured the code in my style.css and script.js were the same as above. 
    I opened "inspect" and Console and saw "Uncaught SyntaxError: Unexpected end of input at script.js:498"

    I went to github and got the copenhagen v2 script.js file from there and copied/pasted, then added the accordion js above to the bottom and it worked fine. Not sure what the issue with the static script.js was, but we seem to be ok now.

    Thank you for your help! Knowledge of the Inspect > Console portion will be helpful in the future for troubleshooting as well.

     

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Happy to help :)

    0
  • Jason McDonald

    Hello. 

    I've added the code Trapta provided at the beginning of the thread and this works perfectly in our sandbox HC.
    When I tried doing it on our live environment it's not working. The accordion is here but clicking on it does not expand it. 

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Hii Jason Mcdonald,

    Please check the console tab in your inspect tool, if there is any issue, copy that and paste it here so I can share some solution.

    0
  • Jason McDonald

    script.js:473 Uncaught SyntaxError: Unexpected token 'export'

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    No problem, did you add JS code to the scripr.js file in your live theme?

    0
  • Jason McDonald

    The only code I have added to the script.js file is 

    document.addEventListener('DOMContentLoaded', function() {
    var acc = document.getElementsByClassName("accordion");
    var i;

    for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
    panel.style.maxHeight = null;
    } else {
    panel.style.maxHeight = panel.scrollHeight + "px";
    }
    });
    }
    });

    We have multiple HC's for different brands and there's different content writers so I'm not sure what modifications have been made to this particular theme. As I said the accordion is working in other HC's we have. 

    Is there anyway to find out which part of the theme code is affecting this? 

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Hi Jason Mcdonald,

    Your live theme must have script code  of accordion and CSS code of accordion and your article must have HTML of accordion then your accordion will worked fine.

    Please make sure that script.js file has :

    document.addEventListener('DOMContentLoaded', function() {
    var acc = document.getElementsByClassName("accordion");
    var i;

    for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
    panel.style.maxHeight = null;
    } else {
    panel.style.maxHeight = panel.scrollHeight + "px";
    }
    });
    }
    });

     style.css file has :

    .accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
    margin-bottom: 10px;
    }

    .accordion p {
      display: inline;
    }

    .active, .accordion:hover {
    background-color: #ccc;
    }

    .accordion:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
    }

    .active:after {
    content: "\2212";
    }

    .panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    }

    article has this HTML code in source:

    <div class="accordion">
    <p>Section 1</p>
    </div>
    <div class="panel">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    0
  • Jason McDonald

    Hi Ifra.

    This is exactly what I have done and the accordion won't expand when clicked.

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    No problem, share your HC public URL and set your working theme live then I can see the issue.

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Hey Jason,

    I saw an error in the console, 

    Uncaught SyntaxError: Unexpected token 'export' (....

    Resolve this,

    See this article: https://codedamn.com/news/javascript/how-to-fix-syntaxerror-unexpected-token-export-in-javascript

    your accordion will work.

     

    OR

    Move accordion script code bottom to top on script.js file and then test.

     

     

    0
  • Naud Janssen

    Hi team,

    Everything is working as expected in the normal "article builder" but when I try to add code inside of the "content blocks builder" there are some difficulties:

    When I try to add the following code, it is automatically deleted after hitting the save button

    <div class="accordion-div">

    When I try to add "sub-headers" a </div> is automatically added after hitting the save button while this is not expected because otherwise the sub-header is not visible. Example code (that is working as expected in article builder, but not in content blocks):

    <div class="accordion">
      <p>Section 1</p>
    </div>
    <div class="panel">
      <div class="accordion-div">
        <div class="accordion">
          <p>Sub-section</p>
        </div>
        <div class="panel">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat.
          </p>
        </div>
    </div>

    Looking forward how to solve this in content blocks. Thanks for letting me know.

    Regards,

    Naud

    0
  • Greg Katechis
    Zendesk Developer Advocacy

    Hi Naud! The issue here is that we only allow class names to be applied to the top-level divs at the moment. This is documented in an article that we have archived for some reason, but we are working on publishing a more robust article in the near future. Apologies for the headaches on that one, as non-documented product limitations are really frustrating.

    Let us know if you have any other questions!

    0
  • Alice SMITH

    Hello,

    I have the accordion set up and it works great in Guide, but how do I get these to work in the Knowledge Capture app?

     

    1
  • Josh Keller
    Zendesk Luminary

    Can anyone advise if this is accessibility/WCAG-compliant?

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Hey Josh Keller,  if you consider WCAG then you can use the HTML5 for accordion:

     <details>
        <summary>
          Section 1
      </summary>
         <p>Click on the "Try it Yourself" button to see how it works.</p>
    </details>

     <details>
        <summary>
        Section 2
      </summary>
         <p>Click on the "Try it Yourself" button to see how it works.</p>
    </details>

     <details>
        <summary>
        Section 3
      </summary>
         <p>Click on the "Try it Yourself" button to see how it works.</p>
    </details>

     

    OR

    Please go through with this article:

    http://web-accessibility.carnegiemuseums.org/code/accordions/

     

    If any query feel free to ask :)

     

    1
  • Kyle Kowalsky

    Pulkit Pandey,

    Is there any additional config to make those Font Awesome chevrons work? I changed the style.css code to match yours, but all I get is a unicode placeholder. I'm just using the Copenhagen theme and editing that.

    EDIT: Found my answer on another thread. Before the content line, add font-family: FontAwesome; I've updated the code below to reflect this.

    .accordion:after {
      /*** content: '\002B'; plus ***/
     font-family: FontAwesome;
    content: '\f078'; /*** chevron ***/
      color: #777;
      font-weight: bold;
      float: right;
      margin-left: 5px;
    }

    .active:after {
      /*** content: "\2212"; minus ***/
    font-family: FontAwesome;  
    content: "\f077"; /*** chevron ***/
    }

    0
  • Mylene

    Hello Trapta,

    Hope you are well. 

    In regards to your reply as per below, could you please be a bit more specific on what to do to tric the code a little please?

    Hi Tony Jansson,

    Yes, it is possible. In order to achieve what you want, you need to tweak code a little bit to make it work accordingly.

    I would like to have my sections appearing as accordions and then when selecting a specific section, the articles appear.

    Thank you

    0

Please sign in to leave a comment.

Powered by Zendesk