JSFiddle - React, Tailwind, and code Playground

by ashishsingh

HTML

<meta charset="utf-8">
<title>Accordion built using customised sap.m.Panel</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m" data-sap-ui-bindingSyntax="complex" data-sap-ui-compatVersion="edge" data-sap-ui-preload="async"></script>

<!-- UI5 control -->
<div id="control"></div>

CSS

html,
    body {
      position: relative;
      height: 100%;
    }

    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }

    #control {
      width: 100%;
      height: 100%;
    }

    .accordion .sapUiVltCell>.sapMPanel>header>.sapMPanelHdr {
      margin-left: 1rem !important;
    }

    .accordion .sapUiVltCell>.sapMPanel>header>.sapMPanelExpandableIcon {
      display: none;
    }

    .accordion .sapMPanel>header {
      cursor: pointer;
    }

    .ip-smart-splitter:not(.resizing) .sapUiLoSplitterContent {
      transition: width 0.25s;
    }

    .sapUiLoSplitterBar.sapUiLoSplitterNoResize {
      width: 0 !important;
    }

    .sapUiVlt.ip-smart-splitter-pane {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    .ip-smart-splitter-pane>.sapUiVltCell.sapuiVltCell {
      height: 100%;
    }

    .ip-smart-splitter--left-not-resizable .sapUiLoSplitterOverlay .sapUiLoSplitterOverlayBar {
      margin-left: -6px
    }

JavaScript

sap.ui.getCore().attachInit(function() {

  "use strict";

  // -----------------------------------------------------------------------------------------------------------------
  jQuery.sap.require("sap.m.Panel");
  jQuery.sap.require("sap.ui.layout.VerticalLayout");
  // -----------------------------------------------------------------------------------------------------------------

  var Panel = sap.m.Panel.extend("com.iperceive.mysmartapp.Panel", {
    renderer: {}
  });

  Panel.prototype.init = function() {
    sap.m.Panel.prototype.init.apply(this, arguments);

    this.addEventDelegate({
      "onAfterRendering": function() {
        var that = this;
        // Bind Header click event
        this.$().find(">header > .sapMPanelHdr").off("click").on("click", function() {
          that.setExpanded(!that.getExpanded());
        });

      }
    }, this);
  };

  Panel.prototype.setExpanded = function(bExpanded, bDontTriggerEvent) {
    if (bExpanded === this.getExpanded()) {
      return this;
    }

    this.setProperty("expanded", bExpanded, true);

    if (!this.getExpandable()) {
      return this;
    }

    // ARIA
    this._getIcon().$().attr("aria-expanded", this.getExpanded());

    this._toggleExpandCollapse();
    this._toggleCssClasses();

    if (!bDontTriggerEvent) {
      this.fireExpand({
        expand: bExpanded
      });
    }

    return this;
  };


  var Accordion = sap.ui.layout.VerticalLayout.extend("com.iperceive.mysmartapp.Accordion", {
    metadata: {
      properties: {
        // If this is set to true, only one Panel can be opened at a time. If the viewer clicks on a panel, any other open panel will be closed.
        openOnlyOne: {
          type: "boolean",
          group: "Misc",
          defaultValue: true
        }
      },
      aggregations: {
        content: {
          type: "com.iperceive.mysmartapp.Panel",
          multiple: true,
          singularName: "content"
        }
      }
    },

    renderer: {}
 ...