I’ve got a product configurator that turns images on and off when a checkbox is selected.
Problem is, I can’t make the whole area (the checkbox and the checkbox label) to work together.
For example, if you click directly on the checkbox, the image will appear, then click again, it will disappear. But, if you click on the checkbox and then click on the checkbox label or the checkbox field a couple of times, the interaction reverses and doesn’t marry up to when the checkbox is selected. The images are only meant to appear when a checkbox is selected.
I should mention that it works in the preview how it should, but on the published site it doesn’t.
Oddly, the radio buttons work fine wherever you click them (which you can see working in the next slide).
I hope that makes sense. Any ideas why this is happening?
only on the first checkbox to try some things. If you try the other ones further below they only have one interaction set to the checkbox only. Either way though, it doesn’t matter which one (checkbox, label or field) you set the interaction to, they all seem to be separate and don’t work as one.
I don’t thing that the UI interaction you want can be implemented using toggle logic because of how Webflow is handling the checkbox. For whatever reason (possibly bug?) the checkbox label has a separate event to the checkbox field. Which is why it seems like the interaction reverses. The closest to a workaround here is probably to add the interaction to the checkbox label as well. You would still have a ‘toggle glitch’ but it would be less noticeable most of the time. Alternatively you would have to wrap your click events in custom code and handle the UI in js or build the UI with another element (custom embed might be an option) that doesn’t exhibit this behaviour.
Agreed.
A simple toggleClass jQuery snippet would solve this in no time.
Funny, because I complained about this missing in-built feature on another thread at the same time, @Gail_Ranger posted here.
This thread is a good tutorial how to solve your issue @livstrawbridge
For me, this would be the quickest, cleanest and best to maintain solution.
Just my 2 cents.
Figured out how to do this without code. If you use the checkbox label to trigger the interaction then it will trigger the interaction and also check the checkbox. Then all you have to do is make sure the label covers both the wrap and checkbox itself which is easy because it naturally does(all ya gotta do is add some padding to the checkbox label or another way). and there ya go!
Thank you for your excellent solution.
I assigned z-index value to checkbox label to cover entire checkbox area, and It works.
Now the checkbox label works like a whole checkbox field and interaction problem solved!