We Keep Coding

On/Off Event on Same Button

I have a toggle button that works with CSS but I need to add some logic when it's on and when it's off. The problem is jQuery cannot read the :after and :before on CSS because they're not actually part of the DOM.
--TOGGLE--
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch">
<label class="onoffswitch-label" for="myonoffswitch">
<span id="switch-inner" class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
--CSS--
.onoffswitch {
position: relative; width: 78px;
-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 #C2C2C2; border-radius: 20px;
}
.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: 28px; padding: 0; line-height: 28px;
font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "ON";
padding-left: 10px;
background-color: #5C7FE3; color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "OFF";
padding-right: 10px;
background-color: #EEEEEE; color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block; width: 18px; margin: 5px;
background: #FFFFFF;
position: absolute; top: 0; bottom: 0;
right: 46px;
border: 2px solid #C2C2C2; 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 {
right: 0px;
}
I tried the onClick event but everytime I click it (logically) it fires the code (multiple times if clicked multiple times), what would be perfect is that one would be true and fire the code and in the second click it would do something else.
I don't know if this could be super simple and my brain is tired and not thinking correctly, but any help would be helpful!!

Adding a click event handler is the right approach. Simply look at the checked property of the checkbox to know the state of the button (on/off).
document.getElementById("myonoffswitch").addEventListener("click", function(){
// Test the state of the checkbox and act accordingly
if(this.checked){
console.log("ON");
} else {
console.log("OFF");
}
});
.onoffswitch {
position: relative; width: 78px;
-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 #C2C2C2; border-radius: 20px;
}
.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: 28px; padding: 0; line-height: 28px;
font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "ON";
padding-left: 10px;
background-color: #5C7FE3; color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "OFF";
padding-right: 10px;
background-color: #EEEEEE; color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block; width: 18px; margin: 5px;
background: #FFFFFF;
position: absolute; top: 0; bottom: 0;
right: 46px;
border: 2px solid #C2C2C2; 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 {
right: 0px;
}
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch">
<label class="onoffswitch-label" for="myonoffswitch">
<span id="switch-inner" class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>

Trying to reverse the JavaScript trigger of an HTML/ CSS switcher

I have an HTML, CSS switcher which is working well.
However - I'd like the effect to be opposite so that there is NO text at all, but when the switcher is swiped then text (via a DIV) is trigger - so basically the opposite way around to how it currently is.
Any ideas how to do this? I have tried playing around with the 'hide' class but I can't get it to work...
Here's the code:
function toggleDiv() {
if (document.getElementById('myonoffswitch').checked) {
document.querySelector('.triggeredDiv').classList.remove('hidden');
} else {
document.querySelector('.triggeredDiv').classList.add('hidden');
}
}
document.getElementById('myonoffswitch').addEventListener("change", toggleDiv);
.onoffswitch {
position: relative;
width: 200px;
-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 #999999;
border-radius: 20px;
}
.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: 51px;
padding: 0;
line-height: 51px;
font-size: 14px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "BY COUNTRY";
padding-left: 10px;
background-color: #dfe4ea;
color: #999999;
}
.onoffswitch-inner:after {
content: "SHOW TEXT";
padding-right: 10px;
background-color: #dfe4ea;
color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block;
width: 50px;
margin: 0.5px;
background: #A1A1A1;
position: absolute;
top: 0;
bottom: 0;
right: 145px;
border: 2px solid #999999;
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 {
right: 0px;
background-color: #999999;
}
.triggeredDiv {
display: block;
}
.triggeredDiv.hidden {
display: none;
}
<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>
<div class="triggeredDiv">
Show Text
</div>

You need to reverse the logic and call the function initially.
function toggleDiv() {
if (document.getElementById('myonoffswitch').checked) {
document.querySelector('.triggeredDiv').classList.add('hidden');
} else {
document.querySelector('.triggeredDiv').classList.remove('hidden');
}
}
toggleDiv() // initial call. You may need to wait DOMContentLoaded
function toggleDiv() {
if (document.getElementById('myonoffswitch').checked) {
document.querySelector('.triggeredDiv').classList.add('hidden');
} else {
document.querySelector('.triggeredDiv').classList.remove('hidden');
}
}
toggleDiv()
document.getElementById('myonoffswitch').addEventListener("change", toggleDiv);
.onoffswitch {
position: relative;
width: 200px;
-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 #999999;
border-radius: 20px;
}
.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: 51px;
padding: 0;
line-height: 51px;
font-size: 14px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "BY COUNTRY";
padding-left: 10px;
background-color: #dfe4ea;
color: #999999;
}
.onoffswitch-inner:after {
content: "SHOW TEXT";
padding-right: 10px;
background-color: #dfe4ea;
color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block;
width: 50px;
margin: 0.5px;
background: #A1A1A1;
position: absolute;
top: 0;
bottom: 0;
right: 145px;
border: 2px solid #999999;
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 {
right: 0px;
background-color: #999999;
}
.triggeredDiv {
display: block;
}
.triggeredDiv.hidden {
display: none;
}
<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>
<div class="triggeredDiv">
Show Text
</div>

I changed the class name from hidden to shown and adjusted the JavaScript accordingly.
.triggeredDiv {
display: none;
}
.triggeredDiv.shown {
display: block;
}
Demo
function toggleDiv() {
var triggeredDiv = document.querySelector('.triggeredDiv');
if (document.getElementById('myonoffswitch').checked) {
triggeredDiv.classList.remove('shown');
} else {
triggeredDiv.classList.add('shown');
}
}
document.getElementById('myonoffswitch').addEventListener("change", toggleDiv);
.onoffswitch {
position: relative;
width: 200px;
-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 #999999;
border-radius: 20px;
}
.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: 51px;
padding: 0;
line-height: 51px;
font-size: 14px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "BY COUNTRY";
padding-left: 10px;
background-color: #dfe4ea;
color: #999999;
}
.onoffswitch-inner:after {
content: "SHOW TEXT";
padding-right: 10px;
background-color: #dfe4ea;
color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block;
width: 50px;
margin: 0.5px;
background: #A1A1A1;
position: absolute;
top: 0;
bottom: 0;
right: 145px;
border: 2px solid #999999;
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 {
right: 0px;
background-color: #999999;
}
.triggeredDiv {
display: none;
}
.triggeredDiv.shown {
display: block;
}
<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>
<div class="triggeredDiv">
Show Text
</div>

Using JQuery, hide text to begin with then show when on country.
$('.triggeredDiv').hide();
function toggleDiv() {
if (document.getElementById('myonoffswitch').checked) {
console.log("hidden")
$('.triggeredDiv').hide();
} else {
console.log("shown")
$('.triggeredDiv').show();
}
}
document.getElementById('myonoffswitch').addEventListener("change", toggleDiv);
.onoffswitch {
position: relative;
width: 200px;
-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 #999999;
border-radius: 20px;
}
.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: 51px;
padding: 0;
line-height: 51px;
font-size: 14px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "BY COUNTRY";
padding-left: 10px;
background-color: #dfe4ea;
color: #999999;
}
.onoffswitch-inner:after {
content: "SHOW TEXT";
padding-right: 10px;
background-color: #dfe4ea;
color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block;
width: 50px;
margin: 0.5px;
background: #A1A1A1;
position: absolute;
top: 0;
bottom: 0;
right: 145px;
border: 2px solid #999999;
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 {
right: 0px;
background-color: #999999;
}
.triggeredDiv {
display: block;
}
.triggeredDiv .hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
<div class="triggeredDiv">
Show Text
</div>

CSS Vertical Button with vertical text

I need vertical button with written vertical text inside. It should not be turned to 90 degree. I need to add some hover effect to right side if mouse on it and give white space between words. I have tried white-space and word-space but it did not help.
Example:
.button {
border-radius: 4px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
<script src="http://d3js.org/d3.v3.min.js"></script>
<button class="button" style="width:60px; height:600px; text-align:center;"><div style="width: 1ch; text-align:center; font: Consolas, Monaco, monospace;font-size:14pt; word-wrap: break-word;white-spacing: 3 px;">Online Sürücü Sifariş Et</div></button>

You can use transform:rotate(-90deg);
.button {
border-radius: 4px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
transform:rotate(-90deg);
-webkit-transform:rotate(-90deg);
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
<button class="button" style=" text-align:center;">Online Sürücü Sifariş Et</button>

.button {
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
text-orientation: upright;
}

I think this is what you want. The button is a vertical button and the text is all one letter below the next. I have used <br> tags for every new line. Have a look
.button {
border-radius: 4px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
<script src="http://d3js.org/d3.v3.min.js"></script>
<button class="button" style="width:60px; height:600px; text-align:center;"><div style="width: 1ch; text-align:center; font: Consolas, Monaco, monospace;font-size:14pt; word-wrap: break-word;white-spacing: 3 px;">O<br>n<br>l<br>i<br>n<br>e<br><br>S<br>ü<br>r<br>ü<br>c<br>ü<br><br>S<br>i<br>f<br>a<br>r<br>i<br>ş<br><br>E<br>t<br></div></button>

There are several ways to accomplish what you're doing, but I like this one:
https://codepen.io/krabbypattified/pen/ybzway
It's a weird CSS attribute, but the imporant code is: white-space: pre-line;
Edit: there's also text-orientation, but that's not supported by many browsers.
Edit: updated the CodePen html

Make div be on the same line as text, where to put display:inline-block?

The context :
Im using a on/off switch button, where i would like the help-text to be on the same line as the switch.
It look's like this right now:
I would like it to look like this:
I've googled that i can use this is my div-style:
display:inline-block;
My code :
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px;
/* bottom = footer height */
padding: 25px;
}
footer {
background-color: #5B8CA8;
position: absolute;
left: 0;
bottom: 0;
height: 110px;
width: 100%;
overflow:hidden;
}
div.upp {
background-color: #5B8CA8;
position: absolute;
left: 0;
top: 0;
height: 39px;
width: 100%;
overflow:hidden;
}
.onoffswitch {
position: relative;
width: 55px;
-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 #999999;
border-radius: 20px;
}
.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: 23px;
padding: 0;
line-height: 23px;
font-size: 11px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "PÅ";
padding-left: 7px;
background-color: #5B8CA8;
color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "AV";
padding-right: 10px;
background-color: #EEEEEE;
color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block;
width: 15px;
margin: 4px;
background: #FFFFFF;
position: absolute;
top: 0;
bottom: 0;
right: 28px;
border: 2px solid #999999;
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 {
right: 0px;
}
<p>
Help Text
</p>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitchT1" unchecked onclick="javascript:toggle1();">
<label class="onoffswitch-label" for="myonoffswitchT1">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
My question :
Where should i put display:inline-block; in my div-style?

Both p and div should have inline-block style.
Of course, in real project I'd not put style attribute - use css classes instead.
<p style="display: inline-block">
Help Text
</p>
<div class="onoffswitch" style="display: inline-block">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitchT1" unchecked onclick="javascript:toggle1();">
<label class="onoffswitch-label" for="myonoffswitchT1">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>

Use both display : inline-block; & vertical-align : middle; on both your p element and your .onoffswitch class. That should produce the desired effect!
A demo :
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px;
/* bottom = footer height */
padding: 25px;
}
p {
display : inline-block;
vertical-align : middle;
}
footer {
background-color: #5B8CA8;
position: absolute;
left: 0;
bottom: 0;
height: 110px;
width: 100%;
overflow:hidden;
}
div.upp {
background-color: #5B8CA8;
position: absolute;
left: 0;
top: 0;
height: 39px;
width: 100%;
overflow:hidden;
}
.onoffswitch {
position: relative;
width: 55px;
display : inline-block;
vertical-align : middle;
-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 #999999;
border-radius: 20px;
}
.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: 23px;
padding: 0;
line-height: 23px;
font-size: 11px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "PÅ";
padding-left: 7px;
background-color: #5B8CA8;
color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "AV";
padding-right: 10px;
background-color: #EEEEEE;
color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block;
width: 15px;
margin: 4px;
background: #FFFFFF;
position: absolute;
top: 0;
bottom: 0;
right: 28px;
border: 2px solid #999999;
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 {
right: 0px;
}
<p>
Help Text
</p>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitchT1" unchecked onclick="javascript:toggle1();">
<label class="onoffswitch-label" for="myonoffswitchT1">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
Try this Fiddle.
Note :
It's a VERY BAD idea to set display : inline-block; & vertical-align : middle; for all p elements.
It's a MUCH, MUCH better idea to add a class to your p element, like this :
<p class="help">
Help Text
</p>
Now, you can set the styles for that element like this :
p.help {
display : inline-block;
vertical-align : middle;
}
This prevents these styles from being applies to all p elements!
See also this Fiddle.

programmatically change flipswitch value

I have tried fiddling with some HTML/JS/CSS
But got stuck on how to change the flipswich dynamically to a desired state.
CSS from here https://proto.io/freebies/onoff/
function on() {
document.getElementById("innerswitchid").className = document.getElementById("innerswitchid").className + "onoffswitch-inner:before";
}
function off() {
document.getElementById("innerswitchid").className = document.getElementById("innerswitchid").className + "onoffswitch-inner:after";
}
.onoffswitch {
position: relative;
width: 90px;
-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 #999999;
border-radius: 20px;
}
.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: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "ON";
padding-left: 10px;
background-color: #34A7C1;
color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "OFF";
padding-right: 10px;
background-color: #EEEEEE;
color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block;
width: 18px;
margin: 6px;
background: #FFFFFF;
position: absolute;
top: 0;
bottom: 0;
right: 56px;
border: 2px solid #999999;
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 {
right: 0px;
}
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<span id="innerswitchid" class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<button onclick="on()">ON</button>
<button onclick="off()">OFF</button>
However that just crashes the flipswich. How can I change the flipswich dynamically to a desired state using js to change the css of the component?

Updating your code to the following:
HTML
<button id="js-btn--on">
ON
</button>
<button id="js-btn--off">
OFF
</button>
JS
document.getElementById("js-btn--on").onclick = on;
document.getElementById("js-btn--off").onclick = off;
function on() {
document.getElementById('myonoffswitch').checked = true;
}
function off() {
document.getElementById('myonoffswitch').checked = false;
}
You can toggle the checkbox and let the CSS do what it intends to accomplish rather than mixing JS and CSS.