How set not-visible an item than not have the "visible" property? - sapui5

Question

I have a button and a grid below.
Inside the grid I have some elements (input, checkbox, label, ...)
How can I set not visible all the elements inside the grid together together at once?
<Grid xmlns="sap.ui.layout" id="idGrid">
<content>
<Label xmlns="sap.m"
id="idLabel"
design="Standard"
text="the label">
</Label>
<Input xmlns="sap.m"
id="idInput"
value="the input">
</Input>
</content>
</Grid>

Answer 1

put the Grid content into a VerticalLayout.
sap.ui.controller("test.controller", {
handleHide: function(oEvent) {
var bt = oEvent.getSource();
var vl = this.getView().byId("vlContent");
if (vl.getVisible()) {
vl.setVisible(false);
bt.setText("Show");
} else {
vl.setVisible(true);
bt.setText("Hide");
}
}
});
var oView = sap.ui.xmlview({
viewContent: jQuery("#view1").html()
});
oView.placeAt("content");
<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m"></script>
<script id="view1" type="sapui5/xmlview">
<mvc:View xmlns:l="sap.ui.layout" controllerName="test.controller" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:f="sap.ui.layout.form">
<l:Grid defaultSpan="L12 M12 S12" width="auto" id="idGridDetail">
<l:content>
<l:VerticalLayout id="vlContent">
<f:SimpleForm id="SimpleFormDisplay111" minWidth="1024" maxContainerCols="2" editable="false" layout="ResponsiveGridLayout" title="" labelSpanL="3" labelSpanM="3" emptySpanL="4" emptySpanM="4" columnsL="1" columnsM="1">
<f:content>
<Label text="Se OC valido per Incas" />
<Text text="{/seOCValidoPerIncas}" />
<Label text="ocdc" id="idLabelCdc" />
<Text text="{/cdc}" id="idTextCdc" />
<Label text="Ultimo passaggio Incas" />
<Text text="{/ultimoPassaggioIncas}" />
</f:content>
</f:SimpleForm>
<Panel expandable="true" expanded="true" headerText="Passaggio da Rampa a Incas">
<content>
<Table xmlns="sap.m" id="idTable_RampaToIncas_testate" items="{
path: '/passaggioRampaToIncas/testate'}">
<headerToolbar>
<Toolbar>
<Label text="Testate" design="Bold"></Label>
</Toolbar>
</headerToolbar>
<items>
<ColumnListItem>
<cells>
<Text text="{dataIns}" />
<Text text="{sePassatoABridge}" />
<Text text="{comando}" />
<Text text="{comando_desc}" />
<Text text="{tag}" />
<Text text="{viaggio}" />
</cells>
</ColumnListItem>
</items>
</Table>
<Label text=""></Label>
<Table xmlns="sap.m" id="idTable_RampaToIncas_righe" items="{
path: '/passaggioRampaToIncas/righe'}">
<headerToolbar>
<Toolbar>
<Label text="Righe" design="Bold"></Label>
</Toolbar>
</headerToolbar>
<items>
<ColumnListItem>
<cells>
<Text text="{dataIns}" />
<Text text="{sePassatoABridge}" />
<Text text="{comando}" />
<Text text="{comando_desc}" />
<Text text="{riga}" />
<Text text="{articolo}" />
</cells>
</ColumnListItem>
</items>
</Table>
<Label text=""></Label>
<Table xmlns="sap.m" id="idTable_RampaToIncas_eventiAttivazione" items="{
path: '/passaggioRampaToIncas/attivazione'}">
<headerToolbar>
<Toolbar>
<Label text="Eventi Attivazione" design="Bold"></Label>
</Toolbar>
</headerToolbar>
<items>
<ColumnListItem>
<cells>
<Text text="{dataIns}" />
</cells>
</ColumnListItem>
</items>
</Table>
</content>
</Panel>
<Panel expandable="true" expanded="true" headerText="Passaggio da Incas a Rampa">
<content>
<Table xmlns="sap.m" id="idTable_IncasToRampa_righe" items="{
path: '/passaggioIncasToRampa/righe'}">
<headerToolbar>
<Toolbar>
<Label text="Righe" design="Bold"></Label>
</Toolbar>
</headerToolbar>
<items>
<ColumnListItem>
<cells>
<Text text="{dataIns}" />
<Text text="{riga}" />
<Text text="{articolo}" />
<Text text="{qta_caricata}" />
<Text text="{qta_prevista}" />
</cells>
</ColumnListItem>
</items>
</Table>
</content>
</Panel>
</l:VerticalLayout>
</l:content>
</l:Grid>
<Button text="Hide" press="handleHide" />
</mvc:View>
</script>
<boy class="sapUiBody" id="content" />