Help Center - Collapsible headers in articles (accordions)

97 Comments

  • Philip Dea
    Comment actions Permalink

    Hi Wes, it worked! Thanks a lot! However, not adding Bootstrap CSS file doesn't work so I had to do the folowing:

    Include Bootstrap CSS and JS files in the "Document Head".

    Add your code to maintain the CSS style in the "CSS".

    Add the sample accordion code from the comments in one of the article's "source".

    Note that http://bootply.com/82734 blocks users from copying the source.

    0
  • Wes Drury
    Comment actions Permalink

    @PhilipD - Glad you got it sorted out as if you are not including the Bootstrap CSS then you must use the CSS thats noted here in this article.  Now that you have included the CSS you are half way there providing a responsive theme.  There are a few other things that you may have to override as the User Info dropdown should be a little off now.  If thats the case let me know as I have the code to correct it.  In order to have a fully responsive theme you must remove the CSS for main:

    /* ====================================================

    Content frame

    main, .header-inner {
    margin: 0 auto;
    padding: 0 20px;
    width: 940px;
    }

    Then add at the top of each HTML page add "<div class="container"> and then at the very bottom close it with "</div>.  This will align everything up and make your entire site responsive.

    0
  • Philip Dea
    Comment actions Permalink

    Hi Wes, thanks a lot. Actually I had missed your link to the CSS in your article before and so I have just used it instead of including Bootstrap's CSS. I'd rather take the safer route, at least for now.  Thanks a lot for proactively preventing me from having further issues.

    0
  • Brian Sam
    Comment actions Permalink

    Question, how difficult would it be to add collapsible sections with articles underneath? Example:  http://www.opensignhelp.com/hc/en-us/categories/200026185-OpenSign-Publisher

    Would implementation be similar to collapsible articles?

    Sorry, I have not tried yet and am not a developer, but was able to do collapsible articles successfully based on these great instructions, and thought it would be nice to collapse articles under a sections as well.

    Thanks!

     

    0
  • Wes Drury
    Comment actions Permalink

    @Brian - You may can accomplish this via one of the default themes that Zendesk have.  Just take a look and get the functionality that you want first then you can edit around the them.  Take a look at The Wiry Merchant and The Curious Wind as they have some collapsible options already in place.  If these are still not what you are looking for then just let me know as with a little re-work we should be able to get the sections to collapse instead of the categories.

    0
  • Brian Sam
    Comment actions Permalink

    @Wes. Thanks!  I did notice those other themes as well.  Feedback on my end was collapsible sections would be nice to have (instead of categories).  Let me get some more feedback on my end and play around a little more and I'll let you know.  Thanks for the quick reply!

    0
  • EmailReady Support
    Comment actions Permalink

    Hi Wes

    I know this article has aged a bit - however was hoping you could help me. How could add this accordion to the actual FAQ's as per this example.

    http://www.emailready.com/faq

     

    0
  • Wes Drury
    Comment actions Permalink

    @EmailReady - I've got code that will add accordions to articles and accordions to categories.  It looks like you might be wanting to add accordions to sections which I would have to play around with.  You could always use one of the default Zendesk themes which have drop-downs for sections.  You could easily turn those into accordions with some CSS.  Let me know if you need further help and I'll do some testing.  Also what theme are you currently using.

    0
  • EmailReady Support
    Comment actions Permalink

    Thank for you reply I would typically want for categories.. I think could I have a copy of this and how I would use Zendesk's {} with your code please

    I tried the Zendesk's version not crazy about it :)

    -1
  • EmailReady Support
    Comment actions Permalink

    Hi Wes

    I am trying to add an accordion to this FAQ's page of mine. I read through this article but not sure which page I need to add this on.

    http://support.emailready.com/hc/admin/appearance?return_to=%2Fhc%2Fen-us

    Any help would be appreciated

    0
  • Wes Drury
    Comment actions Permalink

    @EmailReady - Your Help Center is locked down so I cannot see the page you are referring to.  Would it best to create an account so that I can see as I won't be of much help if I can't see.  Is your FAQ inside of an article as this tutorial is showing you how to add accordions inside of an article.

    0
  • Andrea Saez
    Comment actions Permalink

    @Wes

    • From your Design Panel select “Add Content” then “Article”
    • Click the html button in the article editor
    • Add the following code - http://bootply.com/82734
    • Edit the code as needed and submit your Article.

     

    All I see in that link is a bunch of CSS, and that's an HTML editor. How am I suppose to paste in CSS into an HTML editor? =/

    0
  • Wes Drury
    Comment actions Permalink

    @Andrea - Thanks for the update it looks like my bootply has gone missing.  I would update my article however I can't.  If you look back on Page 1 the HTML code is listed there. :-)

    0
  • Rachel Cloud
    Comment actions Permalink

    Is there a way to create an expand all link that opens all the collapse sections? Thanks

    0
  • Wes Drury
    Comment actions Permalink

    @Rae - Sure just do the following.

    Inside the article add:

    <button type="button btn-default" class="btn btncollapse openall">Open All</button>

    <button type="button btn-default" class="btn btncollapse closeall">Close All</button>

     

    Then in the JS tab below the $(document.ready) function add:

    //Open and Close all accordions
    $('.closeall').click(function(){
    $('.panel-collapse.in')
    .collapse('hide');
    });
    $('.openall').click(function(){
    $('.panel-collapse:not(".in")')
    .collapse('show');
    });

     

    That should do it as long as you are using the Bootstrap framework like I mentioned above.  Let me know if you run into any issues.

    0
  • Rachel Cloud
    Comment actions Permalink

    Thanks! @Wes worked!

    0
  • Wes Drury
    Comment actions Permalink

    @Rae - Awesome :-)

    0
  • Rachel Cloud
    Comment actions Permalink

    Hi @Wes,

    Another question, can we create collapsable sections within the collapsables we set, sub-collapses? As of now I'm using collapsables, and within each section, I have a huge bullet point list that is being anchored to seperate sets of documentation. I was wondering if there was a way to not create so many anchors and possibly have sub-collapsables. I hope that makes sense. 

    0
  • Wes Drury
    Comment actions Permalink

    @Rae - Almost everything is possible with some Javascript/JQuery.  I'm not sure when I will get some free time but if I do I'll try and play around with it.  Take a look at some of the other themes as sometimes you can still the code from there if they are doing that function.

    0
  • Wes Drury
    Comment actions Permalink

    @Rae - Almost everything is possible with some Javascript/JQuery.  I'm not sure when I will get some free time but if I do I'll try and play around with it.  Take a look at some of the other themes as sometimes you can still the code from there if they are doing that function.

    0
  • Rebecca White
    Comment actions Permalink

    Hey Wes,

    Thanks for this article.

    How can we make the entire header clickable without any text?  

    I am using a background image and don't want text but can't seem to get the header clickable using this:

     

    <div id="accordion" class="panel-group">
    <div class="panel panel-default">
    <a href="#collapseOne" data-toggle="collapse" data-parent="#accordion2">
    <div class="panel-heading">
    <h4 class="panel-title">test</h4></a>
    </div><!-- End panel-heading -->
    </div><!-- End panel-default -->

    Only the text is clickable and not the div

    Thanks!

    0
  • Wes Drury
    Comment actions Permalink

    @Rebecca - I believe you will need to wrap that with an <a> tag.

    0
  • Rebecca White
    Comment actions Permalink

    Thanks Wes - I figured it out by adding padding to the a tag so it took up the same space..

     

    Follow up question - - how can I put spacing between head panel-heading ?

     

    I tried adding a margin-bottom to panel-heading but doesn't seem to work :(

    0
  • Wes Drury
    Comment actions Permalink

    @Rebecca - Its hard to troubleshoot without seeing your code as I have no idea what modifications you have done.  Can you post the URL or send it to me via email - support@wesdrury.zendesk.com

    0
  • Jonathan
    Comment actions Permalink

    Great stuff @Wes thank you for this!

    0
  • Nathaniel Erlandson
    Comment actions Permalink

    Hey @Wes
    I was able to add this in, however my first panel doesn't show correctly. The panel size, border and indent don't seem to be applying correctly like the other panels do.

    Here's what it's looking like

    0
  • Xenfall
    Comment actions Permalink

    Awesome guide, Wes, thank you for sharing!

    I tried working on this, and it seems to be mostly functioning as it needs.

    However, you'll notice the top box has a lighter border than the bottom one.

    I'd like all the borders to mimic the top box. Any suggestions on where to look?



    0
  • Wes Drury
    Comment actions Permalink

    @Scott - Is your help center open or can you post the link to the article so I can inspect the code via browser and take a look.

    0
  • Xenfall
    Comment actions Permalink

    https://fieldedge.zendesk.com/hc/en-us/articles/115006163887

    I'll keep this open for a bit while you take a look, but do maintain a locked down help center. It's not live yet though.

    Updated: Link should work for a bit. Let me know!

    0
  • Wes Drury
    Comment actions Permalink

    @Scott - To mimic the top box border please remove the following from your CSS tab.

    .panel-default {
        border-color: #ddd;
    0

Please sign in to leave a comment.

Powered by Zendesk