Help Center - Collapsible headers in articles (accordions)

97 Comments

  • Xenfall
    Comment actions Permalink

    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
    Comment actions Permalink

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

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

    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
    Comment actions Permalink

    @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
    Comment actions Permalink

    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
    Comment actions Permalink

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

     

    Thanks,

    1
  • Mary Haberle
    Comment actions Permalink

    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
    Comment actions Permalink

    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
    Comment actions Permalink

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

    0
  • Mariliam
    Comment actions Permalink

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

    0
  • Wes Drury
    Comment actions Permalink

    @marlliam - Glad to hear :-)

    0
  • Richard Li
    Comment actions Permalink

    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
    Comment actions Permalink

    @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
    Comment actions Permalink

    @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
    Comment actions Permalink

    @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
  • Jen
    Comment actions Permalink

    @Wes

    Thanks for sharing this code.  I'm running into an issue where the text in the 2nd two panels have more of a margin than the 1st panel.  Any way around that?

    Here's the link:

    https://help.light.house/hc/en-us/articles/360002504214

    Thank you!

    0
  • Wes Drury
    Comment actions Permalink

    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
  • Jen
    Comment actions Permalink

    Thnks @Wes.  I added the code I copied from your original post on May 13, 2014 12:33 and did no other formatting to it.  Even without any edits, the larger margins are still displaying.

    https://help.light.house/hc/en-us/articles/360002504214

    <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="#collapseOne" data-toggle="collapse" data-parent="#accordion2">Camera isn’t detecting people consistently </a></h4>
    </div>
    </div>
    <div id="collapseOne" class="panel-collapse collapse">
    <div class="panel body">
    <p>If your Lighthouse isn’t “seeing” (putting halos around) people 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 from the camera Lighthouse’s person detection has a range of approximately 30 feet. Make sure the camera's within 25 feet or less if you’re using it to keep an eye on something (like a door or specific room). Is the person 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 people with blue halos, please visit the More tab in your app and use the Contact Support feature to let us know!</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>

    0
  • Wes Drury
    Comment actions Permalink

    @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
  • Jen
    Comment actions Permalink

    Thanks Wes, I copied your code completely and I still have uneven spacing in the accordions.  I'm not sure what's going on - maybe it's the formatting being added for bullets, bold, etc?  

    This is mine:

    This is yours:

    It's very strange.

    0
  • Jessie Schutz
    Comment actions Permalink

    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
    Comment actions Permalink

    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
    Comment actions Permalink

    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
    Comment actions Permalink

    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
    Comment actions Permalink

    Thanks Vladen, I managed to get it going

    0
  • Nicole - Community Manager
    Comment actions Permalink

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

    0
  • Paul Caldarariu
    Comment actions Permalink

    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
    Comment actions Permalink

    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
    Comment actions Permalink

    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
    Comment actions Permalink

    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

Please sign in to leave a comment.

Powered by Zendesk