For Zoho Services only:


I'm actually part of a bigger team at Ascent Business Solutions where we have support technicians and project consultants. Support is for smaller technical fixes but this can include developments, reports or integrations; depending on the size of the task. Projects are for more time-consuming developments such as revamps of the Zoho Suite of apps or on-site training. The advantage of a team is that if I am out-of-office for a day or so, there is always someone at Ascent Business Solutions who can deal with any queries/issues you may have.

Our support rates can be found and purchased at http://ascentbusiness.co.uk/zoho-support-2. A support bundle doesn't have an expiry date. So whether we can do what you want within the bundle and a year later need further support, if there are minutes left on the bundle then there is no additional charge.

Our project rates for bigger developments can be found at http://ascentbusiness.co.uk/crm-solutions/zoho-crm-packages-prices and will involve a dedicated project consultant along with developers who will hold your hand through the development process.

If you want help building a solution for one of the Zoho Apps in the Zoho Suite, contact us on 0121 293 8140 (UK) or by email at info@ascentbusiness.co.uk. You can also visit our website at http://ascentbusiness.co.uk.

I regularly build and specialize in 2-way API integrations for Xero, Shopify and eBay.

Zoho Creator Page: Toggle On/Off Switch: Hide/Display a Div

What?
So this is an article documenting how to create an on/off toggle switch that hides and displays between 2 div layers in a Zoho Creator Page (so not a form or report but a page).

Why?
This is written at a time when Javascript or interactive pages that change on the fly based on a mouse event in Zoho Creator automatically get removed on Save/Update of the page. The following uses the built-in functionality of Zoho Creator and could be seen as a 'Pure CSS' feature. I'm aiming to make a list of capabilities that can be done without loading another framework considering that Zoho Creator has their own version of Bootstrap and jQuery. This is the first example I have where you would want dynamic content in a Zoho Creator page without the use of JavaScript or 'Widgets JS'.

How?
Here are some screenshots to preview what the code below will do, simply copy the code and paste into a Zoho Creator Page. Be sure to copy the code directly into a page and NOT to be in a function that is called from the Zoho Creator page. Functions are read by Zoho and certain CSS attributes (such as position and float) will be removed automatically. The code has to be pasted directly in the Page and then the CSS attributes will remain.

Preview
Zoho Creator - On/Off Switch - Photo View
Zoho Creator - On/Off Switch - List View
the Code
The code below can be changed to suit your own styling. It has been intended for use on large desktops so it's a little buggy on smaller cellular/mobile devices which you'll need to tweak to display in a way other than the previous preview images. You can change the shape, content and colors used for the on/off switch but try to keep the on/off css section to preserve functionality:
copyraw
<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 #ff7058; 
        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: "List View";
        padding-left: 14px;
        background-color: white; color: #ff7058;
    }
    .onoffswitch-inner:after {
        content: "Photo View";
        padding-right: 18px;
        background-color: #ff7058; color: white;
        text-align: right;
    }
    .onoffswitch-switch {
        display: block; 
		width: 18px; 
		margin: 6px;
		height: 18px;
        background: #FFFFFF;
        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 #ff7058;
    }
    .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: 200px;
        padding:20px;
    }
    .main-content1{
        display:block;
    }
    .main-content2{
        display:none;
    }
	/* 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">Photo View</div>
			<hr class="divider-line">
			<div class="sub-content">
				<div class="content-image pull-left"><img src="https://upload.wikimedia.org/wikipedia/commons/e/ee/Sample_abc.jpg" /></div>
				<div class="content-image pull-left"><img src="https://www.picpedia.org/highway-signs/images/sample.jpg" /></div>
				<div class="content-image pull-left"><img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/Flower-sample-MBS-10-2.jpg" /></div>
			</div>
		</div>
	</div>
	<div class="main-content2">
		<div style="display:inline-block;width:100%">
			<div class="headline-inner">List View</div>
			<hr class="divider-line">
			<div class="sub-content">
				<div class="content-row">
					<div class="content-column col-md-3">
						Product Name #1
					</div>
					<div class="content-column col-md-3">
						Product SKU #1
					</div>
					<div class="content-column col-md-3">
						Product Description #1
					</div>
					<div class="content-column col-md-3">
						Product Price #1
					</div>
				</div>
				<div class="content-row">
					<div class="content-column col-md-3">
						Product Name #2
					</div>
					<div class="content-column col-md-3">
						Product SKU #2
					</div>
					<div class="content-column col-md-3">
						Product Description #2
					</div>
					<div class="content-column col-md-3">
						Product Price #2
					</div>
				</div>
				<div class="content-row">
					<div class="content-column col-md-3">
						Product Name #3
					</div>
					<div class="content-column col-md-3">
						Product SKU #3
					</div>
					<div class="content-column col-md-3">
						Product Description #3
					</div>
					<div class="content-column col-md-3">
						Product Price #3
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
  1.  <style> 
  2.      /* On Off Switch CSS */ 
  3.      .onoffswitch { 
  4.          position: relative; 
  5.          width: 100%; 
  6.          -webkit-user-select:none; 
  7.          -moz-user-select:none; 
  8.          -ms-user-select: none; 
  9.      } 
  10.      .onoffswitch-checkbox { 
  11.          display: none; 
  12.      } 
  13.      .onoffswitch-label { 
  14.          display: block; 
  15.          overflow: hidden; 
  16.          cursor: pointer; 
  17.          border: 2px solid #ff7058; 
  18.          border-radius: 20px
  19.          width: 140px
  20.          margin: 10px
  21.      } 
  22.      .onoffswitch-inner { 
  23.          display: block; 
  24.          width: 200%; 
  25.          margin-left: -100%; 
  26.          transition: margin 0.3s ease-in 0s
  27.      } 
  28.      .onoffswitch-inner:before, .onoffswitch-inner:after { 
  29.          display: block; 
  30.          float: left; 
  31.          width: 50%; 
  32.          height: 30px
  33.          padding: 0
  34.          line-height: 30px
  35.          font-size: 14px
  36.          color: white; 
  37.          font-family: Trebuchet, Arial, sans-serif; 
  38.          font-weight: lighter; 
  39.          box-sizing: border-box; 
  40.      } 
  41.      .onoffswitch-inner:before { 
  42.          content: "List View"
  43.          padding-left: 14px
  44.          background-color: white; color: #ff7058; 
  45.      } 
  46.      .onoffswitch-inner:after { 
  47.          content: "Photo View"
  48.          padding-right: 18px
  49.          background-color: #ff7058; color: white; 
  50.          text-align: right; 
  51.      } 
  52.      .onoffswitch-switch { 
  53.          display: block; 
  54.          width: 18px
  55.          margin: 6px
  56.          height: 18px
  57.          background: #FFFFFF; 
  58.          position: absolute; 
  59.          top: 0
  60.          bottom: 0
  61.          left: 10px
  62.          border: 2px solid white; 
  63.          border-radius: 20px
  64.          transition: all 0.3s ease-in 0s
  65.      } 
  66.      .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner { 
  67.          margin-left: 0
  68.      } 
  69.      .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch { 
  70.          left: 120px
  71.          border: 2px solid #ff7058; 
  72.      } 
  73.      .onoffswitch-checkbox:checked ~ .main-content1{ 
  74.          display:none; 
  75.      } 
  76.      .onoffswitch-checkbox:checked ~ .main-content2{ 
  77.          display:block; 
  78.      } 
  79.      /* Div to hide/display CSS */ 
  80.      div[class^="main-content"]{ 
  81.          margin-top: 10px
  82.          border: 1px solid #CCC; 
  83.          height: 200px
  84.          padding:20px
  85.      } 
  86.      .main-content1{ 
  87.          display:block; 
  88.      } 
  89.      .main-content2{ 
  90.          display:none; 
  91.      } 
  92.      /* Custom CSS */ 
  93.      .content-image img{ 
  94.          width:100px
  95.          height:100px
  96.      } 
  97.      div.sub-content div.content-row{ 
  98.          padding: 10px 0 0 0
  99.          height: 30px
  100.      } 
  101.      div.sub-content div.content-row:nth-child(even){ 
  102.          background-color:#eee; 
  103.      } 
  104.      .headline-inner{ 
  105.          font-size: 20pt
  106.          margin-left: 14px
  107.      } 
  108.      .main-content1 .sub-content{ 
  109.          margin-left: 14px
  110.      } 
  111.  </style> 
  112.  <div class="onoffswitch"> 
  113.      <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked> 
  114.      <label class="onoffswitch-label" for="myonoffswitch"> 
  115.          <span class="onoffswitch-inner"></span> 
  116.          <span class="onoffswitch-switch"></span> 
  117.      </label> 
  118.      <div class="main-content1"> 
  119.          <div style="display:inline-block;width:100%"> 
  120.              <div class="headline-inner">Photo View</div> 
  121.              <hr class="divider-line"> 
  122.              <div class="sub-content"> 
  123.                  <div class="content-image pull-left"><img src="https://upload.wikimedia.org/wikipedia/commons/e/ee/Sample_abc.jpg" /></div> 
  124.                  <div class="content-image pull-left"><img src="https://www.picpedia.org/highway-signs/images/sample.jpg" /></div> 
  125.                  <div class="content-image pull-left"><img src="https://upload.wikimedia.org/wikipedia/commons/b/bf/Flower-sample-MBS-10-2.jpg" /></div> 
  126.              </div> 
  127.          </div> 
  128.      </div> 
  129.      <div class="main-content2"> 
  130.          <div style="display:inline-block;width:100%"> 
  131.              <div class="headline-inner">List View</div> 
  132.              <hr class="divider-line"> 
  133.              <div class="sub-content"> 
  134.                  <div class="content-row"> 
  135.                      <div class="content-column col-md-3"> 
  136.                          Product Name #1 
  137.                      </div> 
  138.                      <div class="content-column col-md-3"> 
  139.                          Product SKU #1 
  140.                      </div> 
  141.                      <div class="content-column col-md-3"> 
  142.                          Product Description #1 
  143.                      </div> 
  144.                      <div class="content-column col-md-3"> 
  145.                          Product Price #1 
  146.                      </div> 
  147.                  </div> 
  148.                  <div class="content-row"> 
  149.                      <div class="content-column col-md-3"> 
  150.                          Product Name #2 
  151.                      </div> 
  152.                      <div class="content-column col-md-3"> 
  153.                          Product SKU #2 
  154.                      </div> 
  155.                      <div class="content-column col-md-3"> 
  156.                          Product Description #2 
  157.                      </div> 
  158.                      <div class="content-column col-md-3"> 
  159.                          Product Price #2 
  160.                      </div> 
  161.                  </div> 
  162.                  <div class="content-row"> 
  163.                      <div class="content-column col-md-3"> 
  164.                          Product Name #3 
  165.                      </div> 
  166.                      <div class="content-column col-md-3"> 
  167.                          Product SKU #3 
  168.                      </div> 
  169.                      <div class="content-column col-md-3"> 
  170.                          Product Description #3 
  171.                      </div> 
  172.                      <div class="content-column col-md-3"> 
  173.                          Product Price #3 
  174.                      </div> 
  175.                  </div> 
  176.              </div> 
  177.          </div> 
  178.      </div> 
  179.  </div> 
Category: Zoho :: Article: 731

Credit where Credit is Due:


Feel free to copy, redistribute and share this information. All that we ask is that you attribute credit and possibly even a link back to this website as it really helps in our search engine rankings.

Disclaimer: The information on this website is provided without warranty and any content is merely the opinion of the author. Please try to test in development environments prior to adapting them to your production environments. The articles are written in good faith and, at the time of print, are working examples used in a commercial setting.

Thank you for visiting and, as always, we hope this website was of some use to you!

Kind Regards,

Joel Lipman
www.joellipman.com

Related Articles

Joes Revolver Map

Accreditation

Badge - Certified Zoho Creator Associate
Badge - Certified Zoho Creator Associate

Donate & Support

If you like my content, and would like to support this sharing site, feel free to donate using a method below:

Paypal:
Donate to Joel Lipman via PayPal

Bitcoin:
Donate to Joel Lipman with Bitcoin - Valid till 8 May 2022 3QnhmaBX7LQSRsC9hh6Je9rGQKEGNQNfPb
© 2021 Joel Lipman .com. All Rights Reserved.