Help Center - Collapsible headers in articles (accordions)

102 Comments

  • Xenfall

    Didn't seem to have an effect. I removed that entire entry from the CSS tab and published.

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

    0
  • Wes Drury

    @Scott - It inherited it from another class add this into your CSS file.

    .panel-default {
         border-color: transparent !important;
    0
  • Xenfall

    I think that did it! Take a look. 

    Conversely, if I wanted to go with the solid border such as the second image, would I change the border-color to Solid?

    I'll want to do some AB testing with the team.

    0
  • Wes Drury

    @Scott - Yes you can play around with that CSS selector, however, there may be a few more in there that would need tweaking.  Since I don't have this in my test account I'm having to depend on your article posting.

    0
  • Xenfall

    Thanks Wes, I appreciate the help! That's the only article so far, so just using that to do all the testing.

    0
  • Diego García

    Hi, this is a great solution. Question...it works in the webwidget also?

     

    Thanks,

    1
  • Mary Haberle

    Is there any modification needed if we just want to make our ToC collapsible, not the article content itself? And can this be applied on a per article basis? We have some articles with a short ToC that do not need collapsing. Thanks!

    0
  • Mariliam

    I'm not sure if this was brought up before but is there a possibility of adding non-static, clickable arrows to the accordions, like this one below, without messing it up:

    0
  • Wes Drury

    Sure take a look at this code, it should get you going.

    0
  • Mariliam

    Whoops I forgot to write back!!! That worked perfectly! thanks so much Wes :-) 

    0
  • Wes Drury

    @marlliam - Glad to hear :-)

    0
  • Richard Li

    Hi Wes, Quick question! For the accordion, I would like it so that if our users clicked on anywhere on the heading that it would open up the accordion. However, I haven't found a way to make it work yet. Do you have any suggestions? Thank you!

    0
  • Wes Drury

    @Richard - Not sure what code you are using but you could turn the header div into an a tag.  If not post the code you are using so I can take a look.

    0
  • Richard Li

    @Wes - The code that I am using in each article to create a container is:

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

    <div class="panel panel-default">
    <div class="panel-heading">
    <h4 class="panel-title"><a class="accordion-toggle" href="#collapseOne" data-toggle="collapse" data-parent="#accordion2"> Type Title Here </a></h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse">
    <div class="panel-body">
    <p>Type text here</p>
    </div>
    </div>
    </div>

    Other than this, the code for CSS is identical to the one from this article.

    0
  • Richard Li

    @Wes - Just an update. I have made the panel-heading clickable by adding this to the CSS:

    .panel-heading a {
    display: block;
    text-decoration: none;
    }

    However, I found that the area clickable is only up to the size of the title. Is there anyway to make the entire box clickable instead?

    Also, I found that when trying to adjust the size of the title through the article, it seems to "revert" itself back into a hyperlink by changing the title color back to that of blue. Is there anyway to prevent this from happening as well?

    0
  • Wes Drury

    Hi @Jen

    It looks like you have some extra divs in your code thats throwing the formatting off.  If you can't figure it out let me know and I'll post the code for you but I was able to remove some div's and got it looking correct in the browser.

    0
  • Wes Drury

    @Jen - Give this a try, I just copied the second accordion up to the first so you will need to modify it.

    <p>If your camera’s having trouble detecting people and/or pets, there are a few easy things to check right away--just see the section(s) below that fits best. If you’re having an issue with facial recognition specifically, check here.</p>
    <div id="accordion" class="panel-group">
    <div class="panel panel-default">
    <div class="panel-heading">
    <h4 class="panel-title"><a href="#collapseTwo" data-toggle="collapse" data-parent="#accordion2">Person detection vs. facial recognition</a></h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
    <div class="panel-body">
    <p>You may occasionally see a person outlined in blue, but not see his or her face show up under the new faces section. This is usually due to one of the following reasons: Different range for people and facial recognition The camera recognizes people up to 30 feet away, but only picks up people’s faces up to 12-14 feet away--just because you see a blue halo around someone doesn’t mean their face will always be picked up. To improve facial recognition, try moving the camera closer to doors, or other areas where people come and go frequently. How clearly the camera sees the face Even inside 12-14 feet, partial or obstructed face views usually won’t be captured by the camera, and poor lighting may also limit facial recognition. To avoid this, make sure your camera’s view is close to eye level, with good lighting. Interference in the camera’s view Anything permanently in the field of view (like a potted plant, or the edge of the table the camera’s sitting on) closer than 3 feet can interfere with facial recognition quality. Take a look at the live view in your app--adjust the camera so the 3 feet in front are totally clear, if they're not already.</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">Person detection vs. facial recognition</a></h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
    <div class="panel-body">
    <p>You may occasionally see a person outlined in blue, but not see his or her face show up under the new faces section. This is usually due to one of the following reasons: Different range for people and facial recognition The camera recognizes people up to 30 feet away, but only picks up people’s faces up to 12-14 feet away--just because you see a blue halo around someone doesn’t mean their face will always be picked up. To improve facial recognition, try moving the camera closer to doors, or other areas where people come and go frequently. How clearly the camera sees the face Even inside 12-14 feet, partial or obstructed face views usually won’t be captured by the camera, and poor lighting may also limit facial recognition. To avoid this, make sure your camera’s view is close to eye level, with good lighting. Interference in the camera’s view Anything permanently in the field of view (like a potted plant, or the edge of the table the camera’s sitting on) closer than 3 feet can interfere with facial recognition quality. Take a look at the live view in your app--adjust the camera so the 3 feet in front are totally clear, if they're not already.</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">Camera isn’t detecting pets consistently</a></h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
    <div class="panel-body">
    <p>If your Lighthouse isn’t “seeing” (putting halos around) pets it’s usually due to one of the following: Interference in the camera’s view Anything permanently in the field of view (like a potted plant, or the edge of the table the camera’s sitting on) closer than 3 feet can interfere with the 3D sensor. Take a look at the live view in your app--adjust the camera so the 3 feet in front are totally clear, if they're not already. Blinding light Too much direct sunlight hitting the camera’s lens may cause interference with the 3D sensor. If you notice a large glare in any part of your camera’s live view, please adjust its angle to avoid too much direct sunlight. Distance and size Smaller pets should be detected within 12-15 feet, but may not be detected farther away, depending on size. Generally, smaller pets have a shorter range, larger pets can be recognized from farther away. Is the pet moving If someone stops moving for too long they’ll stop being haloed, and won’t show up in recordings, but as soon as they start moving again they should be start being tracked again. If you’ve tried all of the above and the camera still isn’t picking up pets, please visit the More tab in your app and use the Contact Support feature to let us know!</p>
    </div>
    </div>
    </div>

    On my test everything looked the same.

    0
  • Jessie Schutz
    Zendesk team member

    Hey Jen!

    It definitely looks like the bulleted formatting is the culprit. I've pinged Wes to see if he can help you puzzle it out!

    0
  • Niki Tibble

    Hello, 

    This has been really useful thank you. Can you please tell me if there is a way to make the whole box clickable (rather than just the text)?

    Thank you, 

    Niki 

    0
  • Sherri Anderson

    I can NOT get this to work for the life of me, have no idea why.  I can get it to show up and look great on the page but the accordions don't actually function.  I don't know what I am doing wrong but have read all the comments and played around with it, still not luck :(

    0
  • Vladan Jovic
    Community Moderator

    Hey Sherri, many things can be a reason for that.

    Could you share your help center URL so I can take a look? 

    0
  • Sherri Anderson

    Thanks Vladen, I managed to get it going

    0
  • Nicole S.
    Zendesk Community Team

    Glad to hear you got things sorted, Sherri! Thanks for letting us know. :)

    0
  • Paul Caldarariu

    Hi guys,

    I literally tried every piece of code in this thread but I can't manage to make this work. I want to achieve something similar to the image Mariliam posted a while ago. Could you please explain to me step by step what should I do and which code I should add to make this work? In all the code posted I see that is not used the latest version of Bootstrap, is that right?

    Thanks!

    Regards,
    Paul

    0
  • Jessie Schutz
    Zendesk team member

    Hey Paul!

    If you could post a screenshot of the code you're currently using it might be easier to get some help on this. Somebody might be able to see what's going wrong.

    0
  • Jacque Gothard

    Hi! I'm trying to add the code into the article where I want the accordions, but what code from the third bullet pint in the second section do I add? This is what I see when I click that link: 

     

    0
  • Jacque Gothard

    Also the UI in that screenshot in the article is pretty outdated. I really had to hunt for where to copy the CSS code.

     

    0
  • Jacque Gothard

    So I tried the code that was you gave as an example for Jen above, and I the accordions aren't collapsable 

     

    0
  • Jacque Gothard

    I got the accordions in place, but they don't open when I look at the article in preview. I can't uncollapse them. 

    0
  • Dan Ross
    Community Moderator

    Hi Jacque,

    Do you have an article up anywhere with an accordion code sample I can look at? It'd be easier to see how you have things setup, and thus easier to try to help!

    Thanks!

    0

Please sign in to leave a comment.

Powered by Zendesk