Recent searches


No recent searches

Add Accordion to the templates

Pinned


image avatar

Ifra Saqlain

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

Posted Jun 18, 2024

Hi Community,

 

Question - Is there any way to automatically close an open accordion when you click to open another one? So only one accordion is open at a time?

 

Do the following steps:

 

I). Add HTML code to your template.

<div class="accordion-div"> 
<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>


 <div class="accordion">
  <p>Section 2</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>


  <div class="accordion">
  <p>Section 3</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>

</div>

 

II). Add HTML code to your ‘Source code’  while creating the article to show accordion functionality on your article page.

 

III). Add JS 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() {

var panel = this.nextElementSibling;
if (panel.style.maxHeight){
  this.classList.toggle("active");
  panel.style.maxHeight = null;
} else {
  let active = document.querySelectorAll(".accordion-div .accordion.active");
  for(let j = 0; j < active.length; j++){
    active[j].classList.remove("active");
    active[j].nextElementSibling.style.maxHeight = null;
  }
  this.classList.toggle("active");
  panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}

 

iv). 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;
}

 

 

 

Test well and let me know :)

Thank You


2

2

2 comments

Do I need to add any other js library to my assets folder, or edit any template file? Do you have an example of these accordions (from a visual and functional point of view)?

0


Yes, it is possible. Here is the modified code that closes the currently open accordion automatically once a new one is clicked: 


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

for (i = 0; i < acc.length; i++) {
 acc[i].addEventListener("click", function() {
   let activeAccordions = document.querySelectorAll(".accordion-div .accordion.active");
   for (let j = 0; j < activeAccordions.length; j++) {
     activeAccordions[j].classList.remove("active");
     activeAccordions[j].nextElementSibling.style.maxHeight = null;
   }

   var panel = this.nextElementSibling;
   if (!this.classList.contains("active")) {
     this.classList.add("active");
     panel.style.maxHeight = panel.scrollHeight + "px";
   } else {
     this.classList.remove("active");
     panel.style.maxHeight = null;
   }
 });
}

So when the accordion is clicked, I try first to find all currently active accordions, remove the active class, and reset the maxHeight of the panel.  Then check the current panel to see if it is active and if not, the active class is added, and changing the maxHeight to scrollHeight. 
 

I also created a sandbox to demo the component:

https://codesandbox.io/p/sandbox/friendly-julien-tvc882

0


Please sign in to leave a comment.

Didn't find what you're looking for?

New post