[ARCHIVED] Help Center - Collapsible headers in articles (accordions)

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.

@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.

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!

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 

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 :(

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

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

Thanks Vladen, I managed to get it going

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

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: 

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

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

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

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!

hi, i have a problem with its code. Can some help me please. Here the link to my problem. 

https://support.zendesk.com/hc/en-us/community/posts/360029207014-Content-is-shifting-when-i-add-the-code-of-this-article-Help-Center-Collapsible-headers-in-articles-accordions-?page=1#community_comment_360004746994

Not sure if anybody else is having this issue, but when I rolled out these changes, my form picker stopped working. My users are unable to select which form they're submitting a ticket for. Has anybody had this issue? Know any workarounds?

@Michael can you provide us with a link to your help center if it's public available?

22612477588: was the issue regarding the form picker resolved? I'm currently having the same problem and noticed that when I disable the <script> that calls jquery-3.3.1.slim.min.js the form picker works again. 

Is it possible to keep below code included in the document_head without my form picker being broken?

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

Is installing bootstrap necessary for accordions to work in zendesk guide centers? 

Hey @Lucy Su

It's not the only way, but it's likely one of the easiest ways to get this functionality. Bootstrap takes care of all code that makes the accordions move, you just need to assign the appropriate classes to your accordion sections. 

Hello Wes,

Your screenr video/photo is no longer available. Do you have another place where you put your example?

Hey @Wes Drury,

Any chance you have an updated link that shares what the previous one did?

Thanks!

Hey Wes! I've tried to copy the HTML from this link, and it appears to be missing: https://www.codeply.com/go/bp/82734

I'd love to make a connection, if you're available. 

Thanks!

Danielle