I have a requirement to load 2 reports using a toggle button created using Html and css in the page section . I embedded the report like <div elName='zc-component' viewLinkName='All_Orders' params='zc_Header=true'>2 Loading View...</div> .I using this along with HTML/CSS to make a toggle switch to call report 1 when one option is selected and load another report say report 2 .While one report is loading correctly , When i toggle the switch for the first time , the other report is not getting loaded automatically like the first report . I need to click the add button and cancel it to get it loaded (not sure why) otherwise it shows only the report name.
Can you help me solve the issue ?
Here is the code HTML/CSS along with embedded report :
<%{
%>
<style>
.onoffswitch {
position: relative;
width: 100%;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block;
overflow: hidden;
cursor: pointer;
border: 2px solid #1cb6c7;
border-radius: 20px;
width: 140px;
margin: 10px;
}
.onoffswitch-inner {
display: block;
width: 200%;
margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
display: block;
float: left;
width: 50%;
height: 30px;
padding: 0;
line-height: 30px;
font-size: 14px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: lighter;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "Orders View";
padding-left: 14px;
background-color: white; color: #1cb6c7;
}
.onoffswitch-inner:after {
content: "Items View";
padding-right: 18px;
background-color: #1cb6c7; color: white;
text-align: right;
}
.onoffswitch-switch {
display: block;
width: 18px;
margin: 6px;
height: 18px;
background: #2ba0ba;
position: absolute;
top: 0;
bottom: 0;
left: 10px;
border: 2px solid white;
border-radius: 20px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
left: 120px;
border: 2px solid #2485b5;
}
.onoffswitch-checkbox:checked ~ .main-content1{
display:none;
}
.onoffswitch-checkbox:checked ~ .main-content2{
display:block;
}
div[class^="main-content"]{
margin-top: 10px;
border: 1px solid #CCC;
height: 1500px;
padding:20px;
}
.main-content1{
display:block;
}
.main-content2{
display:none;
display:block;
}
.content-image img{
width:100px;
height:100px;
}
div.sub-content div.content-row{
padding: 10px 0 0 0;
height: 30px;
}
div.sub-content div.content-row:nth-child(even){
background-color:#eee;
}
.headline-inner{
font-size: 20pt;
margin-left: 14px;
}
.main-content1 .sub-content{
margin-left: 14px;
}
</style>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
<div class="main-content1">
<div style="display:inline-block;width:100%">
<div class="headline-inner">Items View</div>
<hr class="divider-line">
<div class="sub-content">
<div elName='zc-component' viewLinkName='All_Items' params='zc_Header=true'>Loading View...</div>
</div>
</div>
</div>
<div class="main-content2">
<div style="display:inline-block;width:100%">
<div class="headline-inner">Orders View</div>
<hr class="divider-line">
<div class="sub-content">
<div elName='zc-component' viewLinkName='All_Orders' params='zc_Header=true'>2 Loading View...</div>
</div>
</div>
</div>
</div>
<%
}%>
See screen shots attached