Recent searches


No recent searches

Tip: Collapsible headers in articles or templates (accordions)

Pinned


image avatar

Trapta Singh

Zendesk LuminaryCommunity Moderator

Posted Aug 18, 2021

The original tip was posted by Wes. I am simply updating the tip to make it work with the current theme version.

Let gets started without any further delay.

Demo: https://moderatortrapta.zendesk.com/hc/en-us

Step 1: Add the below code (HTML CODE SNIPPET) to the source code of your article.

<div class="accordion">
<p>Section 1</p>
</div>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

Click OK to save the progress.

NOTE: You can copy and paste the same snippet to add as many accordions as you want.

Step 2: Edit your theme to add the below code at the bottom of your style.css file

.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
margin-bottom: 10px;
}

.accordion p {
  display: inline;
}

.active, .accordion:hover {
background-color: #ccc;
}

.accordion:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}

.active:after {
content: "\2212";
}

.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}

Step 3: Edit your theme to add the below code at the bottom of your script.js file

document.addEventListener('DOMContentLoaded', function() {
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
});

Save and publish the changes.

YOU CAN USE THE ABOVE CODE TO ADD ACCORDION ANYWHERE THROUGHOUT THE THEME. YOU NEED TO PASTE THE HTML CODE SNIPPET (IN STEP 1) IN RESPECTIVE TEMPLATES WHERE IF YOU WANT TO ADD IT ANYWHERE OTHER THAN THE ARTICLE TEMPLATE. 

Let us know if you face any issues.

Thank you @... for figuring out the issues in the tip and providing the fix for the same.

Thanks


6

136

136 comments

Hi Ifra Saqlain

Hi

Why is it that when I try to add code to an article, instead of a class with buttons, the code just changes to a space like on the screenshot?

0


image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

Hi Max Nason, I tried it and it's working fine.

 

 

I opened the source code for the article and pasted the code:

 

 

Please check the security setting,

Guide > Setting > Guide Setting > Security > Check the checkbox 'Display Unsafe content' > Save

 

Please do the setting and if you face any issues let me know, and I'll fix that.

 

 

 

0


Hi Ifra Saqlain,

Thank you for all your help with my accordions a few months ago, I got them working for signed-in users, but when users view our help center without signing in, the accordions don't work. They don't open. 

Here is an example: https://community.environicsanalytics.com/hc/en-us/articles/360029443292-MobileScapes-Data-Extract-Glossary 

Any idea why they would only be working when users are signed-in to the help center?

0


image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

Hi Kyla,

Please wrap your code inside this condition 

if (HelpCenter.user.role!="anonymous"){

/* Change default avatar */
  const $lt_avatar = $('.lt-user-avatar');
  if ($lt_avatar.attr('src').indexOf('default') > -1) {  
         $lt_avatar.attr('src', assetsDefaultAvatar);
  }
  

}


Error:


If you are not sign-in code will not be able to find the avatar so it will throw an error. Try the given solution and let me know for further query :)

 

Thanks

 

1


Thank you Ifra Saqlain, it worked! 

0


Ifra Saqlain this is incredibly helpful - thank you! 

Just wondering, is it possible to adjust the code so all the accordions are expanded by default as opposed to minimized by default?

0


image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

Hey Colleen,

Use this CSS code instead of the previous one:

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  margin-bottom: 10px;
}

.accordion p {
  display: inline;
}

.active, .accordion:hover {
  background-color: #ccc;
}

.accordion:after {
  content: "\2212";
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  
   content: '\002B';
}

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 100%;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.active + .panel{
    max-height: 0;
   transition: max-height 0.2s ease-out;
}

 

Use this script code instead of the previous one:

 var acc = document.getElementsByClassName("accordion");
  var i;

  for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function() {
      this.classList.toggle("active");
      var panel = this.nextElementSibling;
      if (panel.style.maxHeight) {
        panel.style.maxHeight = panel.scrollHeight + "px";
      } else {
        panel.style.maxHeight = null;
        
      }
    });
  }

 

Try this and if any confusion feel free to ask :)

 

Thanks

 

0


Is it possible to insert a content block inside an accordion?

1


Marco, I have not found a way around this yet. I just came here to find out as well. I'm hoping someone is able to answer. I've been incorporating accordions into our knowledge articles, however, I'm unable to put a content block into an accordion. When I have a content block in an article, the source code is gone either on top of the content block or the bottom, wherever my curser is set to. Does anyone know if there's a way around this? 

0


Hi, we have implemented the accordions and they work well. But our support often has to sent links to article content / also to content in accordions and we want, that the customer gets allready the open accordion. Is this possible? Can we sent links with the “instruction” to open the accordion directly? Thank you. 

0


image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

Hi Ronja Sindek,

 

Do you need an accordion that's open by default?

0


Hi Ifra, no not by default. The accordion should open, if the customer uses the link to the accordion. 
For your information: We use instead of the <p> element, <h3> element, for getting a link to the accordion element. But then, the customer has to click again, to get the information, and this is not so pretty.

0


My query is the same as Ronja Sindek's. Can our Support team share a link to one specific accordion in the article, and is there a way for the relevant accordion to appear expanded?

0


image avatar

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

0


Hello, would it be possible to add images under each accordion instead of text. For example, the agent clicks the plus sign to expand the accordion and they see step by step guide with screenshots of what to click.

Thank you

0


image avatar

Brett Bowser

Zendesk Community Manager

Debs Teru you should be able to use HTML to add images within the accordion so you can share screenshots. You would just need to add your <img> tags within <div class="panel"> </div> I believe. 

Hope this helps!

0


Please sign in to leave a comment.

Didn't find what you're looking for?

New post