<!DOCTYPE HTML>
<html>

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="utf-8">

  <title>Demo</title>
  <script id="sap-ui-bootstrap" src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
    data-sap-ui-libs="sap.m, sap.f"
    data-sap-ui-frameOptions="allow"
    data-sap-ui-theme="sap_belize_plus"
    data-sap-ui-compatVersion="edge"
    data-sap-ui-preload="async"
    data-sap-ui-resourceRoots='{"demo": "./"}'
    
    data-sap-ui-xx-componentPreload="off"
    data-sap-ui-xx-supportedLanguages=""
  >
  </script>

  <script>
    sap.ui.getCore().attachInit(function() {
      sap.ui.component({
        async: true,
        manifestUrl: "manifest.json",
      }).then(function(createdComponent) {
        sap.ui.require([
          "sap/m/Shell",
          "sap/ui/core/ComponentContainer",
        ], function(Shell, ComponentContainer) {
          new Shell({
            app: new ComponentContainer({
              component: createdComponent,
              height: "100%"
            })
          }).placeAt("content");
        });
      });
    });
  </script>
</head>

<body class="sapUiBody" id="content">
</body>

</html>
sap.ui.define([
  "sap/ui/core/UIComponent"
], function(UIComponent) {
  "use strict";
  
  return UIComponent.extend("demo.Component", {
    metadata: {
      manifest: "json"
    },
    
    init: function() {
      UIComponent.prototype.init.apply(this, arguments);
      this.getRouter().initialize();
    }
    
  });
});
{
  "_version": "1.7.0",
  "start_url": "index.html",
  "sap.app": {
    "id": "demo",
    "type": "application",
    "title": "Demo",
    "description": "Sample Code",
    "applicationVersion": {
      "version": "1.0.0"
    }
  },
  "sap.ui": {
    "technology": "UI5",
    "deviceTypes": {
      "desktop": true,
      "tablet": true,
      "phone": true
    },
    "supportedThemes": [
      "sap_belize_hcw",
      "sap_belize_hcb",
      "sap_belize_plus",
      "sap_belize"
    ]
  },
  "sap.ui5": {
    "config": {
      "sapFiori2Adaptation": true
    },
    "dependencies": {
      "minUI5Version": "1.46.7",
      "libs": {
        "sap.ui.core": {},
        "sap.m": {},
        "sap.f": {}
      }
    },
    "resources": {
      "js": [
        
      ],
      "css": [
        
      ]
    },
    "contentDensities": {
      "compact": true,
      "cozy": true
    },
    "models": {},
    "rootView": {
      "viewName": "demo.view.App",
      "id": "rootView",
      "type": "XML"
    },
    "routing": {
      "routes": [{
        "name": "home",
        "pattern": "",
        "target": "home",
        "titleTarget": "home"
      }],
      "targets": {
        "home": {
          "viewId": "homeView",
          "viewName": "Home",
          "transition": "fade",
          "viewLevel": 1
        },
        "notFound": {
          "viewName": "Home",
          "transition": "slide",
          "viewLevel": 98
        }
      },
      "config": {
        "async": true,
        "routerClass": "sap.m.routing.Router",
        "viewType": "XML",
        "viewPath": "demo.view",
        "controlId": "rootApp",
        "controlAggregation": "pages",
        "transition": "slide",
        "bypassed": {
          "target": "notFound"
        },
        "homeRoute": "home"
      }
    }
  }
}
<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" async="true">
  <App id="rootApp">
    <pages>
      <!-- Navigated views will be placed in here -->
    </pages>
  </App>
</mvc:View>
<mvc:View xmlns="sap.m" xmlns:f="sap.f" xmlns:mvc="sap.ui.core.mvc" xmlns:core="sap.ui.core" controllerName="demo.controller.Home" displayBlock="true" async="true">
  <Page id="homePage" title="Home">
    
    <List id="idList" items="{accordion>/accodata}">
      <items>
          <CustomListItem>
              <Panel expandable="true" expanded="{accordion>expanded}" expand="onPanelExpand">
                <headerToolbar>
                  <Toolbar active="true" press="onPanelToolbar">
                    <content>
                      <Text text="{accordion>title}" />
                    </content>
                  </Toolbar>
                </headerToolbar>
                <content>
                  <Text text="{accordion>content}" />
                </content>
              </Panel>
          </CustomListItem>
      </items>
    </List>
              
  </Page>
</mvc:View>
    sap.ui.define([
      "sap/ui/core/mvc/Controller"
    ], function(Controller) {
      "use strict";
    
      return Controller.extend("demo.controller.Home", {
        onInit: function() {
    
          var oMyModel = new sap.ui.model.json.JSONModel({
              accodata: [{
                expanded: false,
                title: 'Title A',
                content: 'Content AAA'
              }, {
                expanded: true,
                title: 'Title B (expanded on init)',
                content: 'Content BBB'
              }, {
                expanded: false,
                title: 'Title C',
                content: 'Content CCC'
              }, {
                expanded: false,
                title: 'Title D',
                content: 'Content DDD'
              }]
            }
    
          );
          this.getView().setModel(oMyModel, "accordion");
    
        },
    
    
        onPanelExpand: function(oEvent) {
          if (oEvent.getParameters().expand) {
            var oModel = this.getView().getModel("accordion");
            var aPath = oEvent.getSource().getBindingContext("accordion").getPath().split("/");
            var selectedIndex = +aPath[aPath.length - 1];
            var aAccordion = oModel.getProperty("/accodata");
            for (var i = 0; i < aAccordion.length; i++) {
              if (i !== selectedIndex) {
                aAccordion[i].expanded = false;
              }
            }
            oModel.updateBindings();
          }
        },
    
        onPanelToolbar: function(oEvent) {
          var oPanel = oEvent.getSource().getParent();
          oPanel.setExpanded(!oPanel.getExpanded());
        }
    
      });
    });