JQuery accordion not initializing in loop

Question

I have a bunch of JQuery accordions on a page, all with class "accordion", and I want to initialize them. I know I can do this:

var accordions = $( ".accordion" );
accordions.accordion();

However, I need to initialize them all with slightly different parameters based on their attributes. So I try the following code:

var accordions = $( ".accordion" );        
for (var i = 0; i < accordions.length; i++)
{
    var autoExpand = accordions[i].getAttribute("autoExpand"); // get attribute            
    accordions[i].accordion({ 
            animate: 100, 
            active: location.href.includes(autoExpand) ? 0 : false, 
            collapsible: true, 
            heightStyle: "content",
            icons: { header: "ui-icon-plus", activeHeader: "ui-icon-minus" } 
       });  
} 

But I get this error: jquery-3.4.1.min.js:2 Uncaught TypeError: accordions[i].accordion is not a function

Why is this happening?

Answer 1

you can do something like this, and set the condition using incremental value of i or you can increase the parameters in function

function setAcc(a,i){
$(a).accordion({ 
            animate: 100, 
            active: location.href.includes(autoExpand) ? 0 : false, 
            collapsible: true, 
            heightStyle: "content",
            icons: { header: "ui-icon-plus", activeHeader: "ui-icon-minus" } 
       });  

}

var accordions = $( ".accordion" );        
for (var i = 0; i < accordions.length; i++)
{

 setAcc(accordions,i);   

}