Ggtcf

jQuery(document).ready(function( $ )

var acc30 = document.getElementsByClassName("acc30");
var acc = document.querySelectorAll("accordion");

acc30.addEventListener("click", function () 
this.classList.toggle("active");

for (var i = 0; i < acc.length; i++) 
 if (acc[i].getAttribute("data-following") === "0") 
 acc[i].classList.toggle("active");

 /* Toggle between hiding and showing the active panel */
 var panel = acc[i].nextElementSibling;
 if (panel.style.display === "block") 
 panel.style.display = "none";
 else 
 panel.style.display = "block";
 

 


 );
);

Hi everyone. I know we're supposed to make it widely relevant, but there are several posts on this that didn't work for me, so I'm getting specific...

I'm using "accordian" buttons, which aren't really accordians, they do open multiple panels at a time. Panels below them are hidden or shown. acc30 is the expand all button (for 30 "accordians"). I also tried iterating click() through the accordian array, and tried iterating through a panel array with just that part of that code on an array using getElementsByClassName(panel).
... And a few others things.... Am I missing something crucial?

Thank you in advance!

And the CSS...:

.accordion 
 background-color: #e5a000;
 color: #f7f6f1;
 cursor: default-button;
 padding: 3%;
 width: 100%;
 text-align: left;
 border: none;
 border-radius: 0 !important;
 transition-timing-function: ease;
 transition: 12s;


.acc2 
 background-color: #66fff2 !important;


.acc30 
 background-color:transparent !important;
 color:#e5a000;
 cursor: default-button;
 padding: 3%;
 width: 100%;
 text-align: left;
 border: none;
 border-radius: 0 !important;
 transition-timing-function: ease;
 transition: 12s;
 font-weight:300;

And the individual accordians themselves work fine using this JS:

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

for (i = 0; i < acc.length; i++) 
 acc[i].addEventListener("click", function() 
 /* Toggle between adding and removing the "active" class,
 to highlight the button that controls the panel */
 this.classList.toggle("active");

 /* Toggle between hiding and showing the active panel */
 var panel = this.nextElementSibling;
 if (panel.style.display === "block") 
 panel.style.display = "none";
 else 
 panel.style.display = "block";
 
 );