Embedded report not loading when using HTML/CSS in a page with a toggle switch to view 2 reports in a page based on toggle right or toggle left

Embedded report not loading when using HTML/CSS in a page with a toggle switch to view 2 reports in a page based on toggle right or toggle left

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>

/* On Off Switch CSS */

    .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 to hide/display CSS */

    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;

    }

/* Custom CSS */

    .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


Thanks for help in advance




                            Zoho Desk Resources

                            • Desk Community Learning Series


                            • Digest


                            • Functions


                            • Meetups


                            • Kbase


                            • Resources


                            • Glossary


                            • Desk Marketplace


                            • MVP Corner


                            • Word of the Day



                                Zoho Marketing Automation
                                        • Sticky Posts

                                        • Merge and Store v1 API depreciation

                                          Hi Zoho Writer users, The Merge and Store v1 API allows you to store the merged document in Zoho WorkDrive. The response of this API will be returned with the document's ID only after the merge is complete. In Deluge, the maximum timeout for operation
                                        • Zoho Creator Developer's Conference 2017 !!!

                                          We welcome all our Creator Developers! You're invited to join us for our annual Zoholics Developers conference August 29th–31st! This is your chance to get training and guidance on Zoho Creator from our most knowledgeable custom app builders.       Zoholics Developers is a three-day event where you'll participate in interactive workshops to hone your app-building skills, get questions answered by Creator experts with personal one-on-one sessions, and connect with other Creator developers from around
                                        • Share your success story

                                          We would like to hear from our passionate users how much Zoho Creator has changed the way you work and benefited you. If you would like to share your story to us and be featured as a proud user of Zoho Creator, then this is for you. Fill up the form below and if you want to be included in a case study, we will get in touch with you to get further details. So what are you waiting for? Tell us your story. Charles


                                        Manage your brands on social media



                                                Zoho TeamInbox Resources

                                                  Zoho DataPrep Resources



                                                    Zoho CRM Plus Resources

                                                      Zoho Books Resources


                                                        Zoho Subscriptions Resources

                                                          Zoho Projects Resources


                                                            Zoho Sprints Resources


                                                              Qntrl Resources


                                                                Zoho Creator Resources


                                                                  Zoho WorkDrive Resources



                                                                    Zoho Campaigns Resources

                                                                      Zoho CRM Resources

                                                                      • CRM Community Learning Series

                                                                        CRM Community Learning Series


                                                                      • Tips

                                                                        Tips

                                                                      • Functions

                                                                        Functions

                                                                      • Meetups

                                                                        Meetups

                                                                      • Kbase

                                                                        Kbase

                                                                      • Resources

                                                                        Resources

                                                                      • Digest

                                                                        Digest

                                                                      • CRM Marketplace

                                                                        CRM Marketplace

                                                                      • MVP Corner

                                                                        MVP Corner




                                                                            Design. Discuss. Deliver.

                                                                            Create visually engaging stories with Zoho Show.

                                                                            Get Started Now