Accordian Expand Script Not Working

Highlighted
Shopify Partner
7 0 0

Hello,

I was making product page tabs. It was working fine on W3Schools but when I am pasting it in Shopify, It doesn't seem to work.

The Script

<script>
var acc = document.getElementsByClassName("accordion-product-details");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panelion = this.nextElementSibling;
    if (panelion.style.maxHeight) {
      panelion.style.maxHeight = null;
    } else {
      panelion.style.maxHeight = panelion.scrollHeight + "px";
    } 
  });
}
</script>
0 Likes
Highlighted
Shopify Partner
7 0 0
Highlighted
Shopify Partner
7 0 0

Nevermind, I fixed it and I have no idea how I did it. I maybe just removed a <p> and it got fixed.

But now there is another problem. When the accordion expands, the content is all over the place. How shall I fix this? See for yourself https://oriando.myshopify.com/products/maelesto-red-tie-set

0 Likes