Question

I am using jquery ui accordion to display some data, and I want all panels to be closed by default active:false if there are more than one panel, but opened active:true if it contains exactly one panel.

$(function() {
                $("#accordion").accordion({autoHeight:false, collapsible: true, navigation: true,
                    clearStyle: true, active: false,
                    change: function(event, ui) {
                        resize_iframe();
                    },
                    create: function(event, ui) {
                    if($("#accordion div").length == 1) {
                       $(this).accordion({active:true});
                    }
                }
                });
            });

I tried this but it’s not working, the panels are always closed even if there is one panel, So anyone knows where is the problem?

Answer 1

I just found a solution for the problem which is creating two different configurations and then create accordion based on condition.

 $(function() {
            var more = {autoHeight:false, collapsible: true, navigation: true,
                    clearStyle: true, active: false,
                    change: function(event, ui) {
                        resize_iframe();
                    }
                };
                var one = {autoHeight:false, collapsible: true, navigation: true,
                    clearStyle: true, active: true
                    change: function(event, ui) {
                        resize_iframe();
                    }
                }
                if($("#accordion div").length == 1) {
                $("#accordion").accordion(one);
                } else {
                    $("#accordion").accordion(more);
                }
            });