SAPUI5 - When panel is expanded, how do I close all others?

Question

I'm generating Panels from view>categories, so the number of panels is not known. I therefore can't assign specific I'd's to them.

When I expand a panel, I need to close all the others, so how can I determine how the other panels are identified to close them?

I can't use byId, so is there a JQuery search I could use instead?

<List id="idList" items="{view>/categories}">
                    <items>
                        <CustomListItem>
                            <Panel expandable="true" expanded="false" headerText="{view>categoryDesc}" onExpand="onExpand">

Answer 1

I would do it via binding (add another property "expanded") to the category, something like that:

view:

<List id="idList" items="{view>/categories}">
    <items>
        <CustomListItem>
            <Panel expandable="true" expanded="{view>expanded}" headerText="{view>categoryDesc}" expand="onExpand" />

controller:

onExpand: function(oEvent) {
    if (oEvent.getParameters().expand) {
        var oModel = this.getView().getModel("view");
        var aPath = oEvent.getSource().getBindingContext("view").getPath().split("/");
        var selectedIndex = +aPath[aPath.length - 1];
        var aCategories = oModel.getProperty("/categories");
        for (var i = 0; i < aCategories.length; i++) {
            if (i !== selectedIndex) {
                aCategories[i].expanded = false;
            }
        }
        oModel.updateBindings();
    }
},

and don't forget to initialize "expanded" property...