How to Expand table in sap ui5

OnExpand Expand table 

View.xml  :

<content>
<l:VerticalLayout
class="sapUiContentPadding"
width="100%">
<l:content>


<Link
text="Open image"
press="onPress"
/>

<Panel id="panel1" expandable="true" expanded="false" >
<content>
<Table id="tableId1" items="{/data}">


 <columns>
 <Column>
 <Text text="column 1"/>
 </Column>

 <Column>
 <Text text="column 2"/>
 </Column>

 <Column>
 <Text text="column 3"/>
 </Column>

 <Column>
 <Text text="column"/>
 </Column>

 </columns>

<items>
<ColumnListItem>
<cells>
<Text text="{column1}"/>
<Text text="{column2}"/>
<Text text="{column3}"/>
<l:VerticalLayout>
<l:content>
<ActionSelect
id="select1"
class="compact"
items="{/data}">
<items>

<core:Item key="{column}" text="{column}" />

</items>

</ActionSelect>
</l:content>
</l:VerticalLayout>

</cells>
</ColumnListItem>

</items>

 </Table>

</content> </Panel>
<Panel id="panel2" expandable="true" expanded="false" >
<content>
<Table id="tableId2" items="{/data}">


 <columns>
 <Column>
 <Text text="column 1"/>
 </Column>

 <Column>
 <Text text="column 2"/>
 </Column>

 <Column>
 <Text text="column 3"/>
 </Column>

 <Column>
 <Text text="column"/>
 </Column>

 </columns>

<items>
<ColumnListItem>
<cells>
<Text text="{column1}"/>
<Text text="{column2}"/>
<Text text="{column3}"/>
<l:VerticalLayout>
<l:content>
<ActionSelect
id="select2"
class="compact"
items="{/data}">
<items>

<core:Item key="{column}" text="{column}" />

</items>

</ActionSelect>
</l:content>
</l:VerticalLayout>

</cells>
</ColumnListItem>

</items>

 </Table>

</content>
</Panel>
<Panel id="panel3" expandable="true" expanded="false" >

<content>
<Table id="tableId3" items="{/data}">


 <columns>
 <Column>
 <Text text="column 1"/>
 </Column>

 <Column>
 <Text text="column 2"/>
 </Column>

 <Column>
 <Text text="column 3"/>
 </Column>

 <Column>
 <Text text="column"/>
 </Column>

 </columns>

<items>
<ColumnListItem>
<cells>
<Text text="{column1}"/>
<Text text="{column2}"/>
<Text text="{column3}"/>
<l:VerticalLayout>
<l:content>
<ActionSelect
id="select3"
class="compact"
items="{/data}">
<items>

<core:Item key="{column}" text="{column}" />

</items>

</ActionSelect>
</l:content>
</l:VerticalLayout>

</cells>
</ColumnListItem>

</items>

 </Table>

</content>

</Panel>


</l:content>
</l:VerticalLayout>
</content>


<footer>
<Toolbar>
<ToolbarSpacer/>
<Button type="Emphasized" text="Expand" press="onExpand" />
</Toolbar>
</footer>



Controller.js :

sap.ui.controller("download.s1", {


onInit: function() {
  var a=this.getView().byId("tableId1");
  var a1=new sap.ui.model.json.JSONModel("Model/data.json");
  a.setModel (a1);

 
  var c=this.getView().byId("tableId2");
  var C1=new sap.ui.model.json.JSONModel("Model/data.json");
  c.setModel (C1);
 
  var d=this.getView().byId("tableId3");
  var d1=new sap.ui.model.json.JSONModel("Model/data.json");
  d.setModel (d1);
},

onPress: function(oEvent) {
window.open('images/img.png', 'Download');
var download = this.getView().byId("link");
download.downloadItem();
},

onExpand: function(oEvent) {



if(this.getView().byId("panel1").getExpanded())
    this.getView().byId("panel1").setExpanded(false);
else
    this.getView().byId("panel1").setExpanded(true);

if(this.getView().byId("panel2").getExpanded())
    this.getView().byId("panel2").setExpanded(false);
else
    this.getView().byId("panel2").setExpanded(true);

if(this.getView().byId("panel3").getExpanded())
    this.getView().byId("panel3").setExpanded(false);
else
    this.getView().byId("panel3").setExpanded(true);



}
});




Model/data.json : 

{
"data" :[
{
"column1":"c1",
"column2":"c2",
"column3":"c3",
"column":""
},


{
"column1":"d1",
"column2":"d2",
"column3":"d3",
"column":"purple"
},

{
"column1":"e1",
"column2":"e2",
"column3":"e3",
"column":"orange"
}

]

}



1. Normal View :

2. when Click on Expand Button :

thanks..!