Custom toggle switch with simple html - html

Question

I'm following some examples to create a custom toggle.
The HTML for this toggle looks very unfamiliar.
I am looking for an HTML expression like this:
<input type="checkbox" class="onoffswitch-checkbox" id="inline">
Instead, I have this:
mixin model
section&attributes(attributes)= name
.checkbox
input(type='checkbox')
label
- var x =1
+model(class="model-1")
https://codepen.io/anon/pen/WBEyWz

Answer 1

That unfamiliar code is from Vue I think. Vue is a JavaScript framework like React or Angular -- so I assume that you are looking for a HTML/CSS solution for a toggle button. The following demo is an adaptation of an example found here.
:root {
font: 700 16px/1 Verdana;
}
.switch {
position: relative;
display: inline-block;
width: 3.75em;
height: 2.125em;
}
.control {
display: none
}
.slider {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 2.125em;
background-color: #ccc;
cursor: pointer;
transition: .4s;
}
.slider::before {
content: "";
position: absolute;
height: 1.625em;
width: 1.625em;
left: 0.25em;
bottom: 0.25em;
border-radius: 50%;
background: #fff;
transition: .4s;
}
.control:checked+.switch .slider {
background: rgba(128, 255, 128, 1);
}
.control:checked+.switch .slider::before {
transform: translateX(1.625em);
}
<input id='control' class='control' type="checkbox">
<label class="switch" for='control'>
<output class="slider" for='control'></output>
</label>

Answer 2

Something like this might get you started:
$('#inline').click(function(){
$('#mydiv').toggleClass('bgred');
});
Demo:
$('#inline').click(function(){
$('#mydiv').toggleClass('bgred');
});
#inline{transform:scale(1.8);}
#mydiv{margin-top:50px;height:100px;width:250px;background:blue;}
.bgred{background:red !important;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
Check: <input type="checkbox" class="onoffswitch-checkbox" id="inline">
<div id="mydiv"></div>
Here is another example, with a label -- and using a variable to keep track of the button state (instead of relying on jQuery's toggleClass method):
Demo The Seconde:
var outer_scope_var = false;
$('#inline').click(function(){
if (outer_scope_var){
$('#mydiv').removeClass('bgred');
outer_scope_var = false;
}else{
$('#mydiv').addClass('bgred');
outer_scope_var = true;
}
});
#inline{transform:scale(1.8);}
#mydiv{margin-top:50px;height:100px;width:250px;background:blue;}
.bgred{background:red !important;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<label for="inline">Click Words or Box:</label>
<input type="checkbox" class="onoffswitch-checkbox" id="inline">
<div id="mydiv"></div>