jQuery手风琴展开第一个启用的面板

Question

I am using a jQuery Accordion but I have a small problem: Based on some conditions, my accordion could have the first enabled H3 to be the second or third one. The first ones I am disabling by adding this class to them "ui-state-disabled".

My accordion looks like this:

$("#accordion").accordion({
         active: true,
         animate: false,
         collapsible: true,
         heightStyle: "content",
         icons: icons
     }); 

Is there a way so that the accordion will only expand the first enabled section? Right now, if I put active: 0 and the first element is disabled, it will expand it nonetheless.

Any suggestions ?

Answer 1

This may not be the most elegant of solutions, but it'll work. You need to find the index of the first H3 inside the #accordion element that does not have the class .ui-state-disabled ... so here's that.

You may also realize this already, but you'll want to remove the ability to click to open disabled sections, so I threw that in.

$("#accordion").accordion({
    active: $('h3:not(.ui-state-disabled):first').index('#accordion h3'),
    animate: false,
    collapsible: true,
    heightStyle: "content",
    icons: icons
});

$(".ui-state-disabled").unbind("click");

Demo on Codepen

edited to add back in your icons: icons