Side-by-side product comparisons from CMS

Design help Animations & Interactions
1

Hello Webflow experts,

I’ve been aiming to build a side-by-side product comparison utilising the Webflow CMS and some basic hide/show interactions. I’ve got it close but not quite there.
The share link below only uses mock-up CMS content and requires styling but by clicking through the images, it is possible to view each selection’s “specs” in a side-by-side layout.
The problem is that you have to click once to show then click again to hide each item’s “specs”, before selecting another item for the comparison - not a very intuitive UX.
I welcome input from all forum uses on how to get this UX functioning correctly. Perhaps custom code is the only answer? If so, I’m happy to explore it.
Thank you.

Here is my public share link: https://preview.webflow.com/preview/side-by-side-comparo?utm_source=side-by-side-comparo&preview=0da76156d3b3f6b7c1621a6583ac2168

2

I think you have the basic structure for this, have you tried using this interaction?

3

Thanks @aaronocampo. I played around with interaction type a lot but still did get the right result. It works perfectly with normal elements but is less predictable with CMS-generated items. For example, using it to hide siblings (the other CMS entries) it does not work. I’d be delighted if someone could show me where I’m going wrong.

4

If anyone is interested, I think this is now close to sorted. See an alternative of the original comparo test here:
https://preview.webflow.com/preview/side-by-side-comparo-9d4b08ecc6a8ae708c?utm_source=side-by-side-comparo-9d4b08ecc6a8ae708c&preview=a7a53d79d35b6ef18021b078659e1a50