For Zoho Services only:


I'm actually part of something bigger at Ascent Business Solutions recognized as the top Zoho Premium Solutions Partner in the United Kingdom.

Ascent Business Solutions offer support for smaller technical fixes and projects for larger developments, such as migrating to a ZohoCRM.  A team rather than a one-man-band is always available to ensure seamless progress and address any concerns. You'll find our competitive support rates with flexible, no-expiration bundles at https://ascentbusiness.co.uk/zoho-services/uk-zoho-support.  For larger projects, talk to our experts and receive dedicated support from our hands-on project consultants at https://ascentbusiness.co.uk/zoho-services/zoho-crm-implementation.

The team I manage specializes in coding API integrations between Zoho and third-party finance/commerce suites such as Xero, Shopify, WooCommerce, and eBay; to name but a few.  Our passion lies in creating innovative solutions where others have fallen short as well as working with new businesses, new sectors, and new ideas.  Our success is measured by the growth and ROI we deliver for clients, such as transforming a garden shed hobby into a 250k monthly turnover operation or generating a +60% return in just three days after launch through online payments and a streamlined e-commerce solution, replacing a paper-based system.

If you're looking for a partner who can help you drive growth and success, we'd love to work with you.  You can reach out to us on 0121 392 8140 (UK) or info@ascentbusiness.co.uk.  You can also visit our website at https://ascentbusiness.co.uk.

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: Please note that the information provided on this website is intended for informational purposes only and does not represent a warranty. The opinions expressed are those of the author only. We recommend testing any solutions in a development environment before implementing them in production. The articles are based on our good faith efforts and were current at the time of writing, reflecting our practical experience 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 bc1qf6elrdxc968h0k673l2djc9wrpazhqtxw8qqp4

Ethereum:
Donate to Joel Lipman with Ethereum 0xb038962F3809b425D661EF5D22294Cf45E02FebF
© 2024 Joel Lipman .com. All Rights Reserved.