Hi,
I know this has been asked tonnes of time, but I still don’t understand how to make this work?
I have a collection item for 4 accreditation images. I want each of them to show/hide their respective div on hover. I have 4 individual divs underneath with 4 unique classes to display content, however as the collection item is a single image, it doesn’t know how to differentiate between each class.
Is there a workaround for this?
I’m using legacy interactions here.
1 Like
Can anyone shed any light on this?
Make the collection list.
In CL item add your image then you UNIQUE div with infos.
No need for different classes.
Make the IX, click on image make the div appear.
Make sure you’re LIMITING the action target to the SIBLING of the image. For that select the action in the IX animation that’s linked to the div, and in the setting panel under, make sure it target the CLASS and it limits to SIBLINGS.
1 Like
Hi Vincent, I’m doing exactly as you’ve suggested, however when I select the limit to siblings it doesn’t display any divs on click?
Thanks for the link, please tell me what page, what list, what’s the div that should appear on click of the image and I’ll have a look right away.
↑ please do this as soon as you post a question, if you had done that in your first message, you’d probably already have the answer already 
Apologies Vincent:
Home page, 3 sections down.
Cyan coloured accreditations with 4 logos.
Underneath this image collection are 4 hidden divs that are positioned absolute on top of each other.
I see
OK, your did popup need to be part of the CMS Collection list… so a unique div inside of the item. So all the infos it contains need to be CMS as well.
Once the div is inside the item, along with the image, it becomes a SIBLING of the image and will fire.
Okay, I’ve placed a rich-text element inside the div and it’s now part of the collection list. I’ve set this div to display none and have the IX as you’ve suggested and it’s still behaving as before!! i.e. it’s not showing the window on click?
If you take a look at the first two collections, they each have hidden individual content in their collection. If I untick limit siblings, the show works and they both display on top of each other, but with limit selected nothing happens on the click! it won’t fire… 
I don’t see where the IX is set
https://dl.dropboxusercontent.com/s%2Fhrblb98bw8kxlob%2Fdwu37.png
Ahhh! I had the IX set on the image rather than the link.
So when I place the IX on the link, it now works… however if the text content is open for “COSMOS” and you click the “Cruelty Free” link, the text gets all jumbled up on top of each other… is there a way to prevent this from happening? I deliberately set the div to position absolute to it would span the whole screen and not just under the collection list column area (as they’ve quite a lot of content)
You have to regenerate the link for me to check the changes I think
Okay, here you go. I’d imagine it’s to do with this absolute positioning but I’m not sure how else I’m meant to make this individual collection text go full width. Thanks again…
Sorry I still can’t see any element that have an IX on it. Maybe you need to publish?
https://dl.dropboxusercontent.com/s%2Fpfstoozhhdf2v34%2Fsbko8.png
Republished again, here’ the share link. They’re legacy IX, is that an issue?
Lol, I did’t see this coming. I don’t know if it’s an issue.
Ok I see now. I forgot to give you a principle. When you have those IX that are opening a sibling or child element in a list, you need to account for their hidden state too.
So the strategy, instead of being: “open that element on click and limit to sibling” must be a bit more complex, like: “Hide this element (not limited, so it is hiding everything that wasn’t when you click) then show this element (limited to sibling).”
Funnily I think this is easier to do with Legacy, and with IX2 you have to use a nasty trick.
1 Like
Hi @vincent
I’m facing a similar issue here and feel really stuck. Could you please help me out? I’ve described my question here: forum link