SAPUI5 make the whole row clickable for sap.m.Panel

Question

In an XML view I have an expandable Panel . Here, I can expand the panel only with clicking the arrow icon.

Is there a way to make the icon AND the whole Panel clickable?

Here's a snippet for a simple Panel : http://jsbin.com/wamutodubu/1/

Answer 1

You can just add a delegate. Add the id "panel" to your panel and this to your controller:

onInit: function() {
  var panel = this.byId("panel");
  panel.addDelegate({
    onclick: function(oEvent) {
      if (oEvent.target === panel.$().find(".sapMPanelHdr").get(0)) {
        panel.setExpanded(!panel.getExpanded());
      }

    }
});

I changed your JSBin: http://jsbin.com/qetaxexoli/1/edit?html,js,output