Show or hide Components in html pages with pure css

The Style

.collapse{
cursor: pointer;
display: none;
}
.collapse + input{
display: block; /* hide the checkboxes */
}
.collapse + input + div{
height:0px;
visibility: hidden;
}
.collapse + input:checked + div{
visibility: visible;
height: 100%;
}

The HTML

<label class="collapse btn btn-secondary" for="_1">Show/Hide</label>
<input id="_1" type="checkbox">
<div>any content here</div>

Using in a Zoho Creator HTML Page

htmlpage Show_Hide_Components_with_CSS()
displayname = "Show Hide Components with CSS"
content
<%{%>
<style>
.collapse{
cursor: pointer;
display: block;
}
.collapse + input{
display: none; /* hide the checkboxes */
}
.collapse + input + div{
height:0px;
visibility: hidden;
}
.collapse + input:checked + div{
visibility: visible;
height: 100%;
}
</style>
<div align="center" style="margin:0 auto;">
 <label class="collapse btn btn-secondary zc-formbutton" for="_1">Show/Hide Text</label>
 <input id="_1" type="checkbox">
 <div style="margin:auto;padding:5px;">I will be hidden</div>
</div>
<%}%>

Live Preview… Click the “Show/Hide Text” button below