I was on the hunt for a way to create a toggle button and stumbled upon one that fit my needs perfectly. However, the example I found uses the toggle on an input field whereas I want to implement it on a div element. Despite attempting various modifications to the CSS classes, I'm unable to get it to function properly.
Here is the CSS code snippet I am currently using:
.toggle {
position: relative;
display: inline-block;
width: 90px;
height: 34px;
}
.toggle input {display:none;}
.switch {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ca2222;
-webkit-transition: .4s;
transition: .4s;
border-radius: 34px;
}
.switch:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
border-radius: 50%;
}
input:checked + .switch {
background-color: #2ab934;
}
input:focus + .switch {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .switch:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(55px);
}
/* Additional CSS */
.switch::after {
content:'OFF';
color: white;
display: block;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
font-size: 10px;
font-family: Verdana, sans-serif;
}
input:checked + .switch::after {
content:'ON';
}
/* End of Additional CSS */
This is how the HTML in the example looks like:
<label class="toggle"><input type="checkbox" id="togBtn"><div class="switch round"></div></label>
Currently, when I apply this structure everything behaves as expected. However, the structure of my own HTML and the div I intend to toggle appears as follows:
<div class="facetwp-facet facetwp-facet-special facetwp-type-checkboxes" data-name="special" data-type="checkboxes">
<div class="facetwp-checkbox" data-value="yes">Yes</div>
</div>
I've made adjustments to the CSS from the example to suit the div I want to toggle but seem to be facing obstacles in getting it to work correctly.
Perhaps the solution is straightforward, but I find myself stuck. Any assistance would be greatly appreciated!