Help Center - Collapsible headers in articles (accordions)

96 Comments

  • Jennifer Rowe
    Comment actions Permalink

    Thanks for another great tip, Wes!

    0
  • Stefan Wright
    Comment actions Permalink

    I'm trying to add the code following the examples but the id="accordion" keeps gettin stripped out so it doesnt work. Can you possibly confirm why this doesnt work?

    0
  • Wes Drury
    Comment actions Permalink

    @Stefan - I just added some code to my test site and it works fine for me.  You can see it here:   https://moderatorwes.zendesk.com/hc/en-us/articles/201165667-Using-mobile-app-with-SSO-enabled

    Is it possible to give me the URL to your site or article that you are using so I can take a look at it.  Also did you make sure you copied and pasted into the "HTML" and not directly into the article.

    0
  • Stefan Wright
    Comment actions Permalink

    @Wes i got it sorted in the end. Someone had unchecked the "display unsafe tags" option in our help center which was stopping the tags working

    0
  • Wes Drury
    Comment actions Permalink

    @Stefan - Glad to hear you got everything sorted out.  If you have further questions just let me know.  I'm also about to release a responsive theme to the community.  You can see it in action here:  http://moderatorwes.zendesk.com

     

    0
  • joe.simonsen
    Comment actions Permalink

    I have a question.  When creating the articles, the sections are already expanded when the page loads.  What are we doing wrong that they do not load collapsed?

    0
  • Wes Drury
    Comment actions Permalink

    Hi Joe can you send me a link to your page by chance so I can take it look.  It sounds like you may be missing some of the code or the javascript is not firing.

    0
  • joe.simonsen
    Comment actions Permalink

    Hey Wes.  Here is the page we are working on. https://adroll.zendesk.com/hc/en-us/articles/202222850-testing-Important-  Looks like some load collapsed and others expanded.  They are able to go back and forth fine when clicked though.  Thanks for the help!

    0
  • Wes Drury
    Comment actions Permalink

    @Joe - I think the issue is from copying the first accordion as the code on the first one is a little different as it is set to always be open.  Is the end goal here that they all be collapsed when first coming to the page or would you still like the first one to be open.

    0
  • joe.simonsen
    Comment actions Permalink

    We'd like them to all be collapsed when coming to the page.  So we can then expand the sections as needed.  Not sure where I got the code wrong for that.

    0
  • Wes Drury
    Comment actions Permalink

    Add the below code into a new article and very the functionality. Its easier for me to provide the code instead of looking through your code.   It worked fine on my test site.  You can see an example on my test site here:  https://moderatorwes.zendesk.com/hc/en-us/articles/201165667-Using-mobile-app-with-SSO-enabled

    <div id="accordion" class="panel-group">

    <div class="panel panel-default">
    <div class="panel-heading">
    <h4 class="panel-title"><a href="#collapseOne" data-toggle="collapse" data-parent="#accordion2"> Step 1 </a></h4>
    </div>
    </div>
    <div id="collapseOne" class="panel-collapse collapse">
    <div class="panel body">
    <p>Text goes here</p>
    </div>
    </div>
    </div>
    <div class="panel panel-default">
    <div class="panel-heading">
    <h4 class="panel-title"><a href="#collapseTwo" data-toggle="collapse" data-parent="#accordion2"> Step 2 </a></h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
    <div class="panel-body">
    <p>Text goes here</p>
    </div>
    </div>
    </div>
    <div class="panel panel-default">
    <div class="panel-heading">
    <h4 class="panel-title"><a href="#collapseThree" data-toggle="collapse" data-parent="#accordion2"> Step 3 </a></h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
    <div class="panel-body">
    <p>Text goes here</p>
    </div>
    </div>
    </div>

    0
  • joe.simonsen
    Comment actions Permalink

    It's strange.  The code we have on our end is the same as it is here but the problem still exists.  I even copied and pasted just this code into a new window and had the same problem.  Could there be an issue with the CSS on the site that might cause this?  We also copied the exactly from the source.  Are there any other files to be referenced in the Document Head section other than the JS file?

    0
  • Wes Drury
    Comment actions Permalink

    That is strange as you see it worked perfectly on my site.   I don't know of any conflicts between this and Zendesk.  If you copy my code to a brand new article does it not stay collapsed.  I just tried again and it worked on my site.  Maybe there is a conflict with the second accordion that you have.  I'll take a look but if you figure anything out just let me know.

    0
  • Stefan Wright
    Comment actions Permalink

    @Joe, have you checked in the settings to make sure that "display unsafe tags" is checked?? I had a problem with the accordion stuff at first but found that on our site someone had unchecked that box.

    0
  • joe.simonsen
    Comment actions Permalink

    Yeah I am confused too.  When I copy it to a new article the accordation starts out expanded too.  I'll keep looking at it.  I have one other theory but its still strange to me.  I'll let you know what I find out

    0
  • joe.simonsen
    Comment actions Permalink

    Hey Stefan.  Yes that box is checked still.  The accordation effects works fine but page always loads with everything expanded.

    0
  • Wes Drury
    Comment actions Permalink

    Also off topic but you should look into making your site Responsive as all you have to do is call the Bootstrap CSS file and then edit some of your HTML.  Your Help Center could be brought up on any device and including mobile.  You are already calling the Bootstrap JS file.  I'll be glad to help you do this as I just got done doing this on another site.  Just a thought.

    0
  • Wes Drury
    Comment actions Permalink

    OK I just tried it on three different sites and it worked across all three so there must be code interfering with it somewhere.  Do you have any custom JS/Jquery running on your site.

    0
  • joe.simonsen
    Comment actions Permalink

    Question.  Why is the code here http://www.bootply.com/82734 different from what you just wrote to me?

    0
  • Wes Drury
    Comment actions Permalink

    The code that just wrote above has the first accordion collapsed like the rest.  I pulled it from one of my test sites.  The code on Bootply has the first accordion always opened.  The Bootply code was probably written on an older version of Bootstrap like 3.0 and now its on 3.1.

    Here is the official documentation if you want to look at it.  http://getbootstrap.com/javascript/#collapse

    0
  • joe.simonsen
    Comment actions Permalink

    Thanks.  It's strange in that when the page loads the window appears expanded.  But when I click on the button it will expand again almost and then retract normally.  The text will flash on the screen once.  If I used the "collapse in" function it seems to work normally without error

    0
  • Wes Drury
    Comment actions Permalink

    @Joe - Can you please disable all your custom JQuery/Javascript.  I see that you have a good bit of custom code.  That will at least tell us if some code is interfering somewhere.  

    0
  • joe.simonsen
    Comment actions Permalink

    Hey Wes.  We got it working fine.  Thanks for your patience !

    0
  • Wes Drury
    Comment actions Permalink

    @Joe - Don't leave me hanging.  What was the issue and I'm glad to hear you got it working.

    0
  • joe.simonsen
    Comment actions Permalink

    As I suspected it had to do with the JS layout in the Document Head section.  I ruled out everything else, even recreated the script using just HTML separately and then compared what could be the issue.  Turns out we had accidentally deleted one of the files needed there.  *face palm*

    0
  • Wes Drury
    Comment actions Permalink

    @Joe - LOL well that does happen at times.  I'm just glad that you got it all figured out.  Don't forget to make your site responsive :-)

    0
  • Philip Dea
    Comment actions Permalink

    Hi Wes, I added the accordions thanks to your instructions. However, the Bootstrap library seems to have overridden the looks of the {{search_bar_small}} component (made it 2,3 times taller).  Can you show me how to fix this?  If possible, please be specific as I only have rudimentary knowledge of HTML and CSS.  Thanks.

    0
  • Wes Drury
    Comment actions Permalink

    @PhilipD - Sorry about that as Bootstrap does tend to overwrite some of the Zendesk CSS when they are named the same.  Can you tell me what theme you are on so I can get the line numbers for you.  We can override the Bootstrap CSS by simply adding !important like below.

    .search input[type=search] {
    border-radius: 20px !important;
    font-size: 18px !important;
    padding: 6px 45px 6px 20px !important;
    width: 450px !important;
    }

    Above is and example of what we will need to do and once you let me know the theme, I will post the code for you so you can fix your search bar.

     

    0
  • Philip Dea
    Comment actions Permalink

    Hi Wes, I am using the Humble Squid theme. Appreciate the help. Thanks.

    0
  • Wes Drury
    Comment actions Permalink

    @PhillipD - Did you include the Bootstrap CSS file along with JS file.  This tip only calls for the JS file which is this one:

    <!-- Latest compiled and minified JavaScript -->
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    

     

    From your description it sounds like you also added the CSS file from Bootstrap which is what causing the interference. If you want a fully responsive Help Center then keep this included and we can make a few changes but you may find other interference's along the way. Add the following to your CSS tab:

    input, button, select, textarea {
    line-height: normal !important;
    }

    Let me know if that puts your search bar back the way it was.

    0

Please sign in to leave a comment.

Powered by Zendesk