Tip: Collapsible headers in articles or templates (accordions)

129 Comentarios

  • Montie Steele

    Ifra Saqlain, amazing tip! I've just implemented this on my help center for a step-by-step process and it's gorgeous. One question - do you happen to know how i could turn an accordion step into an anchored link that automatically opens to the right step? i.e. we want to send some of our users directly to the correct step in the process, and have it auto-open where we send them once they've clicked the link. do you know if this is possible with this accordion set-up? 

    3
  • Salim Moumouni

    Do we have an answer on the below?

    "do you happen to know how i could turn an accordion step into an anchored link that automatically opens to the right step? i.e. we want to send some of our users directly to the correct step in the process, and have it auto-open where we send them once they've clicked the link. do you know if this is possible with this accordion set-up? "

    3
  • Trapta Singh
    Community Moderator
    Zendesk Luminary

    Hi @Tony Jansson,

    I have updated the post to add a demo link for the same as well as to add the bottom margin to accordions in case of more than one.

    Thanks

    2
  • Elizabeth Barron

    This is great, thanks Ifra Saqlain!
    How would we make one auto-close when the next is clicked? 

    1
  • Julio Cesar
    Zendesk Luminary

    Awesome job Trapta Singh, just implemented it in a critical article that we have here, thank you so much for sharing.

    1
  • Eduardo Escobar

    Hello, is there a way to make an accordion within a accordion? As in one section that has more sub sections?

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

    Hey RasmonT,

     

    Solution 1:

    Go to your stylesheet > Press ctrl + f > Find .accordion class > Remove margin-bottom: 10px

     

    Screenshot for the same:

     

     

     

     

    Solution 2:

    Go to your stylesheet > Paste the given code at the bottom on style.css file.

    .accordion {
    margin-bottom:0
    }

     

    Screenshot for the same:

    Thanks

     

     

    1
  • Michael Bui

    is there code to collapse all or expand all?

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

    @Salim Moumouni, did you get the solution to your query:-

    I would want the accordion to open up to the specific place I link a customer to or if a customer searches something and the answer is in one of the accordion I would like it to open it automatically after they click on their search results.

    1
  • Carrie Boogaart

    Ifra Saqlain That worked amazingly! THANK YOU.

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

    Hi Nick Lane,

    Follow the steps below:

     

    I). Copy and paste it to your source while creating article.

    <div class="accordion-div">
      <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>
      <div class="accordion">
        <p>Section 2</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 class="accordion">
        <p>Section 3</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>



    Screenshot for the same:

     

    II).  Copy and paste it to your script.js file at the bottom area.

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


    Screenshot for the same:

     

    III). Copy and paste it to your style.css file at the bottom.

     

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


    Screenshot for the same:

     

     

    Output: Auto close when next is clicked.

     

     

    When you done, test it. If any issue, feel free to ask :)

    Thanks

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

    Hi Manraj Singh :),  if you want that the code can be readable via screen reader then rewrite code with the aria-expanded, aria-label, aria-control, role, panel IDs.

    +1 for your query.

    If you have another query feel free to ask.

     

    Thanks

    1
  • Alyssa

    Hi Ifra Saqlain,

    What an incredible thread! I've gotten my accordions up and running, however, it's not mobile-responsive. I've racked my brain and reviewed everything I can, but I just can't seem to get the accordions to show up for a screen smaller than 1024 px wide. Any help would be very much appreciated.

    I'm also interested in what Salim Moumouni asked about: Is it possible to create an anchor link for the header that also expands the panel? For example, 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! 

    1
  • 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
  • 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
  • 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
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    @Mylene Issartial, just do te same as you did for the category page:

     

    Add accordion to section title and move out section title from the header-

     

     

    Add panel before the subsections code-

     

     

    Close this panel after the article code at the bottom-

     

     

    Test this and let me know  :)

     

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

    Hi Mylene Issartial

    To apply accordion to your subsections on the section page, follow the steps below:

    1). Go to your section_page.hbs file.

    2). Update the subsection title code as given below.

     <button class="accordion"> <span>{{name}}</span></button>


    Only add a button with class-name accordion, do not update anything else.

    Screenshot for the same:

     

     

    Now, add the given code below just after the button that you updated above. This code is for showing articles of subsections on the section page.

    {#if articles}}
            <ul class="article-list panel">
              {{#each articles}}
                <li class="article-list-item {{#if promoted}} article-promoted{{/if}}">
                  {{#if promoted}}
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 12 12" class="icon-star" title="{{t 'promoted'}}">
                      <path fill="currentColor" d="M2.88 11.73c-.19 0-.39-.06-.55-.18a.938.938 0 01-.37-1.01l.8-3L.35 5.57a.938.938 0 01-.3-1.03c.12-.37.45-.63.85-.65L4 3.73 5.12.83c.14-.37.49-.61.88-.61s.74.24.88.6L8 3.73l3.11.17a.946.946 0 01.55 1.68L9.24 7.53l.8 3a.95.95 0 01-1.43 1.04L6 9.88l-2.61 1.69c-.16.1-.34.16-.51.16z"/>
                    </svg>
                  {{/if}}
                  <a href="{{url}}" class="article-list-link">{{title}}</a>
                  {{#if internal}}
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" class="icon-lock" title="{{t 'internal'}}">
                      <rect width="12" height="9" x="2" y="7" fill="currentColor" rx="1" ry="1"/>
                      <path fill="none" stroke="currentColor" d="M4.5 7.5V4a3.5 3.5 0 017 0v3.5"/>
                    </svg>
                  {{/if}}
                </li>
              {{/each}}
            </ul>
          {{else}}
            <i class="section-empty">
              <a href="{{url}}">{{t 'empty'}}</a>
            </i>
          {{/if}}



    Screenshot for the same:

     

     

    Add CSS code to your style.css file.

    .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;
    }
    .active, .accordion:hover {
      background-color: #ccc; 
    }

    .accordion:focus-within{
      background-color:hsl(0deg 0% 97%);
    }


    .panel {
      padding: 0 18px;
      display: none;
      background-color: white;
      overflow: hidden;
    }

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

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

     

     

    Add script code to your script.js file.

    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.display === "block") {
          panel.style.display = "none";
        } else {
          panel.style.display = "block";
        }
      });
    }

    Note: You can update your category page accordion tags and CSS and js code as per the above description, your accordion will work on keypress.

     

    Output:

     

     

     

    If any confusion feel free to ask :)

    Thanks

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

    Hi Kyla,

    Please wrap your code inside this condition 

    if (HelpCenter.user.role!="anonymous"){

    /* Change default avatar */
      const $lt_avatar = $('.lt-user-avatar');
      if ($lt_avatar.attr('src').indexOf('default') > -1) {  
             $lt_avatar.attr('src', assetsDefaultAvatar);
      }
      

    }


    Error:


    If you are not sign-in code will not be able to find the avatar so it will throw an error. Try the given solution and let me know for further query :)

     

    Thanks

     

    1
  • 小林正左子

    Hello, team.

    What a great tip you've provided, I'm so impressed!
    I tried it as soon as I could, but I can't view the sentences that are collapsed in sections.
    I set it up as you wrote, but I wonder if there is something I am missing.

    I hope you will be able to solve the problem.

    Thank you.

    0
  • Trapta Singh
    Community Moderator
    Zendesk Luminary

     

    Can you check if you are getting any errors in your console? If possible please share the URL of your HC so we can take a look at it.

    Thanks

    0
  • 小林正左子

    Hi Trapta,

    For security reasons, it's not safe to post the URL, so can I send you an email directly?

    By the way, the error message was not displayed in script.js, style.css, or HTML code.

    Thanks

    0
  • Trapta Singh
    Community Moderator
    Zendesk Luminary

    @Kobayashi, sure you can. Please find the email ID in my profile.

    Thanks

    0
  • Tony Jansson

    Hi,

    Do anyone have any example pages where I can test this functionality where it has been implemented? :)

    Thanks in advance! 

    0
  • Tony Jansson

    Thanks for uploading a demo Trapta Singh :) 

    Hope it is okey with a follow-up question:

    As i understand, the demo shows articles that collapses with headers, Is this also something that is possible to apply to sections?

    Example if i click on a section header that expands with article titles, and then again expand the article when clicking on the title? (like everything shows up on same page).


    0
  • Trapta Singh
    Community Moderator
    Zendesk Luminary

    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.

    Thanks

    0
  • Lisa Sedlak

    Does anyone have an answer for Montana Steele's question? 

    I have accordions and they look awesome. But I would like to link to specific ones in other articles. 

    In addition, is there a way to make accordions searchable? As in when they search on the site or do CTRL-F they can find the right accordion?

    Thanks! 

    0
  • Dave Dyson
    Hi Eduardo,
     
    I found this method combining HTML and CSS. Note that you will have to enable unsafe content in your help center in order for this method to work (see Allowing unsafe HTML in help center articles). It's possible that there may be other methods that don't require enabling unsafe content, though: https://www.cssscript.com/multilevel-accordion-menu-with-plain-html-css/
    0
  • Realis Support

    Hello there,

    How to make collapsible to be in one place? I don't want to have space between them, not sure how to do that.Any idea how to make it like in the "line" example? My code is 

    <p>
    <span class="wysiwyg-font-size-x-large">Testing:<br>Test</span>
    </p>
    <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>
    <div class="accordion">
    <p>Section 2</p>
    </div>
    <div class="panel">
    <p>
    <a href="https://our.web">Web</a> check this out!.
    </p>
    </div>
    <div class="accordion">
    <p>Section 3</p>
    </div>
    <div class="panel">
    <p>
    <a href="https://our.web">Web</a> check this out!.
    </p>
    </div>
    0
  • Eduardo Escobar

    Hello is there a way to change the 'Plus' and 'Minus" symbols to be something else? Or change the color of the symbol when the mouse is hovered over it? Thanks

    0

Iniciar sesión para dejar un comentario.

Tecnología de Zendesk