Hey all!
I have added a custom toggle switch (built using a simple checkbox) that has some basic click-based animations built into it. However, when I apply a simple click interaction to it’s parent div, the interaction only works when I click around the nested switch div so that the click is directly on the parent div and not on the switch.
How do I get the switch to react to the click interaction assigned to it’s parent div? Are the pre-built animations interfering? If so, is there a workaround? Thanks in advance for any guidance!
Live Site: http://artserv.webflow.io
Public Preview:
https://preview.webflow.com/preview/artserv?preview=9aff882b3db056ef15bba2dc010b7899
Below is the code. This custom code is placed in a Custom Code div with class name “togg” which has the interaction applied to it via the Webflow interface.
<input type="checkbox" class="custom-switch" />
<style>
/** Custom Switch **/
.custom-switch {
position: relative;
display: inline-block;
user-select: none;
}
.custom-switch input {
display: none;
}
.custom-switch label {
position: relative;
display: block;
width: 96px; height: 44px;
border-radius: 22px;
background: #efefef;
cursor: pointer;
}
.custom-switch label:after {
position: relative;
display: block;
content: '';
width: 38px; height: 38px;
top: 3px; left: 3px;
border-radius: 19px;
background: #fff;
pointer-events: none;
transition: all .4s ease-in-out
}
.custom-switch label:active:after {
width: 50px;
}
.custom-switch input:checked + label:active:after {
left: 43px;
}
.custom-switch input:checked + label:after {
left: 55px;
background: #4d34d3;
}
</style>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(".custom-switch").each(function(i) {
var classes = $(this).attr("class"),
id = $(this).attr("id"),
name = $(this).attr("name");
$(this).wrap('<div class="custom-switch" id="' + name + '"></div>');
$(this).after('<label for="custom-switch-' + i + '"></label>');
$(this).attr("id", "custom-switch-" + i);
$(this).attr("name", name);
});
</script>