Jump to content
  • 0

Anyone have a good way to create a toggle switch instead of checkbox to look better


Go to solution Solved by ParkLoey,

Question

3 answers to this question

Recommended Posts

  • 0
  • Solution

Hi @Mikey 

Not sure what type of toggle switch you are referring to, but I recently turned one of my checkbox field to this

image.png.11056d2544d0e24549d8953c2658df80.png

I used this article as a guide: https://www.w3schools.com/howto/howto_css_switch.asp

Here's the CSS code I inserted inside my Header. You'll have to change every "InsertRecordCheckbox1" to InsertRecord + field name

<style>

/* Toggle Button */
input[name="InsertRecordCheckbox1"]{
-webkit-appearance: none;
-webkit-tap-highlight-color: transparent;
position: relative;
border: 0;
outline: 0;
cursor: pointer;
margin: 10px;
}
/* To create surface of toggle button */
input[name="InsertRecordCheckbox1"]:after {
content: '';
width: 60px;
height: 28px;
display: inline-block;
background: rgba(196, 195, 195, 0.55);
border-radius: 18px;
clear: both;
}
/* Contents before checkbox to create toggle handle */
input[name="InsertRecordCheckbox1"]:before {
content: '';
width: 32px;
height: 32px;
display: block;
position: absolute;
left: 0;
top: -3px;
border-radius: 50%;
background: rgb(255, 255, 255);
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}
/* Shift the handle to left on check event */
input[name="InsertRecordCheckbox1"]:checked:before {
left: 32px;
box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.6);
}
/* Background color when toggle button will be active */
input[name="InsertRecordCheckbox1"]:checked:after {
background: #16a085;
}

/* Transition for smoothness */
input[name="InsertRecordCheckbox1"],
input[name="InsertRecordCheckbox1"]:before,
input[name="InsertRecordCheckbox1"]:after,
input[name="InsertRecordCheckbox1"]:checked:before,
input[name="InsertRecordCheckbox1"]:checked:after {
transition: ease .3s;
-webkit-transition: ease .3s;
-moz-transition: ease .3s;
-o-transition: ease .3s;
}

</style>

You can also check this out inside a DataPage: https://c2abn197.caspio.com/dp/adf5800034e2acc873eb437db966

I hope this helps~

Link to post
Share on other sites
  • 0

Hey @Mikey,

If you are talking about making something like a collapsible section via a toggle switch... I've got a solution. This use to be in the Caspio HowTo articles, I am not sure why they deleted the article. 

The original:

// Put this in an HTML block above the fields you want inside the collapsible section. Changing the 'value' will change what text is displayed.

<input type="button" class="dropdown1" onClick="Displayer(1)"
value="Toggle"><br>

<table id="Section1" style="display:none;"><td>

//Put this in an HTML block below all of the fields you want in the collapsible section.

</td></table>

//Add some styling to the toggle button. Make sure to surround CSS with style tags.

<style>
input[type=button] {
border-radius: 3px;
color: yellow;
border-color: #21618C;
background: #21618C;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}

input[type=button]:hover {
background: #A9A9A9;
}
</style>

toggle1.PNG

Or, if you want to spaz it up a bit. This one uses an image of 2 arrows that rotates 180 degrees when opened or closed. 

//first block
<img src="https://img.icons8.com/metro/26/000000/double-down.png" onClick="Displayer(1)" style="width:20px;" id="estimatebuttons1">
<br>

<table id="Section1" style="display:none;"><td>
  
//second block
</td></table>

//footer
<script>
  function Displayer(n) {
    var check = document.getElementById('Section' + n);
    var image = document.getElementById('estimatebuttons' + n);

    if (check.style.display == 'none') {
        check.style.display = 'inline';
        image.style.transform = 'rotate(180deg)';
    } else {
        check.style.display = 'none'
        image.style.transform = 'rotate(0deg)';
    }
};
</script>

 

toggle2.PNGtoggle2-2.PNG

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...