Streaming live at 10am (PST)

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:

Public Preview:

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" />

    /** 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;

    <script src="//"></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);

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