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 Trapta Singh! We tried to apply the accordion, we have no console errors, but the panel content is not opening, can you help us? thanks

 

0


image avatar

Trapta Singh

Zendesk LuminaryCommunity Moderator

Hi @Irene,

Is it possible for you to share the link of your HC or some way I can see what went wrong so I can guide you accordingly?

Thanks

0


Hello everyone, could you please advise how I can apply collapses with headers to sections?
For example, If I click on a section header, it opens the list of the titles of the articles and then again. 
Thank you for your help!

0


image avatar

Ifra Saqlain

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

Hi Mylene Issartial,

For which page you want to do this, Home, category or section?

 

You only need to wrap the section title inside this:

<div class="accordion">

</div>


 

and then wrap all the articles inside the panel:

<div class="panel">

</div>




 

 

CSS and JS code are already there, copy  and paste as it is.

 

If any confusion feel free to ask :)

Thanks

 

0


It worked, thank you very much.

Is there a possibility to have a section and then a subsection to have the country and then a subsection per thematic?

For example: Category: Country

Section: Alaska

Sub section: General and then article

Sub section: Alaska adventure and then articles

sub section: Alaska diving and then articles

A the moment I have the below:

Thank you in advance

0


image avatar

Ifra Saqlain

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

@Mylene Issartial, just do te same as you did for the category page:

 

Add accordion to section title and move out section title from the header-

 

 

Add panel before the subsections code-

 

 

Close this panel after the article code at the bottom-

 

 

Test this and let me know  :)

 

1


0


image avatar

Trapta Singh

Zendesk LuminaryCommunity Moderator

Hi Irene,

Can you try commenting the code from line no. 219 to 221 in your script.js file? It seems that the same is throwing some error.

Or you can try putting the according script code above this line of code.

Let me know how it goes for you.

Thanks

0


Hello Ifra, thank you very much but not sure I did it correctly:

This is what I had : 


       

Then I added the following :

But it does not work and I miss something. 

0


Hi Zendesk team, 

I love these accordions, thank you!

I'm hoping you can help me make them accessible with the keyboard. I've added tabindex=0 to each <div class="accordion">, so they are focusable with the keyboard, but nothing happens when I try to open or close them with the enter key, space bar, etc. They only open and close when clicked with the mouse, but our help center must comply with WCAG 2.1 AA accessibility guidelines, so the accordions must be controllable with the keyboard as well. I believe something has to be edited in the JS, but I'm not knowledgeable enough to figure it out on my own. 

Here's one of our help center articles that uses accordions: https://community.environicsanalytics.com/hc/en-us/articles/360029443292

Any advice is appreciated. Thanks!

0


image avatar

Ifra Saqlain

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

Hi Kyla Craig,

 

There are some changes in the code:

JS code in script.js file:

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.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}

 

Compare the CSS code:

.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;
}
.active, .accordion:hover {
  background-color: #ccc; 
}

.accordion:focus-within{
  background-color:hsl(0deg 0% 97%);
}


.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}

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

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

 

 

Update HTML Code:

Updated Code:

<button class="accordion">Section 1</button>

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


Old Code:

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


Note: Use updated code, change div to button tag only.

 

It will be helpful for you :)

 

Thanks

 

0


image avatar

Ifra Saqlain

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

Hi Mylene Issartial

To apply accordion to your subsections on the section page, follow the steps below:

1). Go to your section_page.hbs file.

2). Update the subsection title code as given below.

 <button class="accordion"> <span>{{name}}</span></button>


Only add a button with class-name accordion, do not update anything else.

Screenshot for the same:

 

 

Now, add the given code below just after the button that you updated above. This code is for showing articles of subsections on the section page.

{#if articles}}
        <ul class="article-list panel">
          {{#each articles}}
            <li class="article-list-item {{#if promoted}} article-promoted{{/if}}">
              {{#if promoted}}
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 12 12" class="icon-star" title="{{t 'promoted'}}">
                  <path fill="currentColor" d="M2.88 11.73c-.19 0-.39-.06-.55-.18a.938.938 0 01-.37-1.01l.8-3L.35 5.57a.938.938 0 01-.3-1.03c.12-.37.45-.63.85-.65L4 3.73 5.12.83c.14-.37.49-.61.88-.61s.74.24.88.6L8 3.73l3.11.17a.946.946 0 01.55 1.68L9.24 7.53l.8 3a.95.95 0 01-1.43 1.04L6 9.88l-2.61 1.69c-.16.1-.34.16-.51.16z"/>
                </svg>
              {{/if}}
              <a href="{{url}}" class="article-list-link">{{title}}</a>
              {{#if internal}}
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" class="icon-lock" title="{{t 'internal'}}">
                  <rect width="12" height="9" x="2" y="7" fill="currentColor" rx="1" ry="1"/>
                  <path fill="none" stroke="currentColor" d="M4.5 7.5V4a3.5 3.5 0 017 0v3.5"/>
                </svg>
              {{/if}}
            </li>
          {{/each}}
        </ul>
      {{else}}
        <i class="section-empty">
          <a href="{{url}}">{{t 'empty'}}</a>
        </i>
      {{/if}}



Screenshot for the same:

 

 

Add CSS code to 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;
}
.active, .accordion:hover {
  background-color: #ccc; 
}

.accordion:focus-within{
  background-color:hsl(0deg 0% 97%);
}


.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}

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

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

 

 

Add script code to your script.js file.

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.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}

Note: You can update your category page accordion tags and CSS and js code as per the above description, your accordion will work on keypress.

 

Output:

 

 

 

If any confusion feel free to ask :)

Thanks

1


Hi Ifra Saqlain,

Thank you for this! It looks like the accordions are now usable with the keyboard, however they won't open anymore. They display like they're open, but the <div class="panel"> content does not appear. I found this error in the Console: 

Do you know how I can fix this? 

0


image avatar

Ifra Saqlain

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

Hi Kyla Craig,

As I explained above, you must use <button  class="accordion">...</button> tag instead of <div class="accordion">.....</div>, otherwise it won't work on keypress. 

 

If you want to solve your first error, your console has a null error because when your page doesn't has any class-name which you use in your script code then code throws error. You can add condition to check the URL string of the page to remove this error.

 

Thanks

 

0


Hi Ifra Saqlain

I'm confused because the page has the class name "panel" (3 times) so I don't know why it's not recognizing it. Are you able to tell me how to add a condition to check the URL string of the page?

Also, I have changed it to <button class="accordion">, I just can't publish my changes because it's not working correctly. 

Thanks for your help!

0


image avatar

Ifra Saqlain

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

@Kyla Craig, that's too simple to make that work.

The code is working, I tested your theme using the dev tool.

 

 

 

Can you share your article page code here or to my mail ID? I want to see what did you do?

0


HI Ifra Saqlain, thank you for your help. However, I am not sure how to make it work, not really into coding and learning step by step. Would it be possible to have a quick call?

0


image avatar

Ifra Saqlain

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

0


Super, please let me know when you can be available :) I am located in the UTC -5 (EST time zone)

0


I am suddenly having issues where tables are cut off in accordions (this was brought to my attention over the weekend). I've tried resizing and have tried adjusting table attributes in style.css but with no results. Any assistance?

/***** Tables *****/
.table, .article-body table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
  border-style: dashed;
  border-width: 1px;
}

@media (min-width: 768px) {
  .table, .article-body table {
    table-layout: auto;
  }
}

.table th, .article-body table th
.table th a, .article-body table th a {
  color: lighten($text_color, 20%);
  font-size: 13px;
  font-weight: 300;
  text-align: left;
  border: dashed 1px #333;
}

[dir="rtl"] .table th, [dir="rtl"] .table th a,
[dir="rtl"] .article-body table th, [dir="rtl"] .article-body table th a {
  text-align: right;
  border: dashed 1px #333;
}

.table tr, .article-body table tr {
  border: dashed 1px #333;
  display: block;
  padding: 5px;
}

@media (min-width: 768px) {
  .table tr, .article-body table tr {
    display: table-row;
    border: dashed 1px #333
  }
}

.table td, .article-body table td {
  display: block;
}

@media (min-width: 768px) {
  .table td, .article-body table td {
    display: table-cell;
  }
}

@media (min-width: 1024px) {
  .table td, .table th,
  .article-body table td, .article-body table th {
    padding: 20px 30px;
  }
}

@media (min-width: 768px) {
  .table td, .table th,
  .article-body table td, .article-body table th {
    padding: 10px 20px;
    height: 60px;
  }
}

0


image avatar

Ifra Saqlain

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

@Elizabeth Barron, you only need to add this style to your table's parent wrapper only.

Credit: https://www.w3schools.com/css/tryit.asp?filename=trycss_table_responsive

 

 

Output: A scrollbar will be added to your table.

0


Thanks Ifra Saqlain. It's a little bizarre that this is happening all of a sudden as these tables have displayed correctly in the past with no scroll bar. Even when I resize the table, it doesn't resize within the accordion. The scrollbar helps for now, but I still feel like there is a bigger issue preventing them from being resized.

0


image avatar

Ifra Saqlain

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

@Elizabeth Barron, scrollbar will help you with small (Mobile and Tablet) devices. If I can see your theme I can share my view or solution but you can try decreasing the padding of table cells in CSS. 

0


Ifra Saqlain our Guide is not available to the public, but I'm happy to provide you with any code or other information you might need. I've tried adjusting padding of table cells, but it doesn't seem to have an impact. 

0


image avatar

Ifra Saqlain

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

@Elizabeth Barron, something is wrong in CSS you can remove all CSS and test. I'm attaching a link of responsve table you should see once:

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_table_responsive

0


Hi Ifra Saqlain - thank you so much for the great code! I've implemented it on my site.

I am wondering if it's possible to set it up so that the first accordion in a series is open? I tried to update my HTML so the first item was of the class "accordion active" but all that did was highlight the header without showing the content within the panel.

This is the first time we're using this feature on our site, so I am trying to guide users by having the first accordion open so they know to open the other ones.

Thanks for any guidance you can provide!

0


Jane M Langschied - it works for me (see here). Could it be that the code conflicts with something in your CSS or JS files? If you already have something defined as "accordion" or "panel" in your CSS file, that could cause an error if you try to re-define it later, or try to reference it in the JS file

0


image avatar

Ifra Saqlain

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

Hi Max Nason, you can use this accordion source code:  https://codepen.io/hedayethm/pen/pqLWdL

 

Follow the steps below:

i). Add these CDNs to your document_head.hbs file.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

 

ii). Add code to your article > edit > source code.

<div id="accordion1" class="panel-group">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 id="h_01HHPZGWSYHQDNDQ35E017Q8XP" class="panel-title">
        <a href="#collapseOne" data-toggle="collapse" data-parent="#accordion1">Collapsible Group Item #1 </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">Panel 1</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 id="h_01HHPZGWSYY31E3VWPCDY4374R" class="panel-title">
        <a href="#collapseTwo" data-toggle="collapse" data-parent="#accordion1">Collapsible Group Item #2 </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
        <div class="panel-body">
          <h2 id="h_01HHPZGWSZR1JE5RQGWMTKFMP5">Heading</h2>
          <div id="accordion21" class="panel-group">
            <div class="panel">
              <a href="#collapseTwoOne" data-toggle="collapse" data-parent="#accordion21">View details 2.1 » </a>
              <div id="collapseTwoOne" class="panel-collapse collapse">
                <div class="panel-body">Details 1</div>
              </div>
            </div>
            <div class="panel ">
              <a href="#collapseTwoTwo" data-toggle="collapse" data-parent="#accordion21">View details 2.2 » </a>
              <div id="collapseTwoTwo" class="panel-collapse collapse">
                <div class="panel-body">Details 2</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 id="h_01HHPZGWSZH2XXEBFW48H9PP7F" class="panel-title">
        <a href="#collapseThree" data-toggle="collapse" data-parent="#accordion1">Collapsible Group Item #3 </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
        <div id="accordion2" class="panel-group">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 id="h_01HHPZGWSZ1VPCZWKF9WD256T7" class="panel-title">
                <a href="#collapseThreeOne" data-toggle="collapse" data-parent="#accordion2">Collapsible Group Item #3.1 </a>
              </h4>
            </div>
            <div id="collapseThreeOne" class="panel-collapse collapse in">
              <div class="panel-body">Panel 3.1</div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 id="h_01HHPZGWSZMFDH7WB0R59YTRNT" class="panel-title">
                <a href="#collapseThreeTwo" data-toggle="collapse" data-parent="#accordion2">Collapsible Group Item #3.2 </a>
              </h4>
            </div>
            <div id="collapseThreeTwo" class="panel-collapse collapse">
              <div class="panel-body">Panel 3.2</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

 

 

 

If any issue feel free to ask :)

Thanks

 

 

 

0


Hi! Ifra Saqlain

If it is possible to display tab functionality in the copenhagen theme ?

 

 

0


image avatar

Ifra Saqlain

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

Hi Max Nason, 

Credit: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_tabs

Please follow the steps below:

i). Go to your hbs file where your want to add tabs.

ii). Add the given code to that hbs file.

<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')">London</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p> 
</div>

<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

iii). In the given HTML code, there are demo text, remove that and add yours.

iv). After that, open style.css file and add the given CSS code.

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

v). Open your script.js file and add the given code.

function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

 

If you face any issue feel free to ask :)

Thanks

 

0


Please sign in to leave a comment.

Didn't find what you're looking for?

New post