Custom CSS/JS Switch conflicting with Interactions

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>

Remove jquery script. Webflow already does that once, including it a second time will cause conflict.

Move all custom script code to the page or site FOOTER.

1 Like

@samliew Did both suggestions - great reminders for proper placement of JS. However, did not change or solve the problem. Thoughts?

I think you can’t host scripts on dropbox. Try this instead

How to host text files on Github