Tip: Collapsible headers in articles or templates (accordions)

16 Comments

  • Masako K

    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

     

    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
  • Masako K

    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

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

    Thanks

    0
  • Montana 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? 

    1
  • Elizabeth Barron

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

    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
  • Trapta Singh
    Community Moderator

    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
  • Julio Cesar

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

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

    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
  • Eduardo Escobar

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

    0
  • Dave Dyson
    Zendesk Community Manager
    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
  • RasmonT

    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
  • Ifra Saqlain
    Community Moderator
    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

Please sign in to leave a comment.

Powered by Zendesk