Apply interaction on a single CMS item

Design help Animations & Interactions
#1

Here’s what I’m trying to do: the screenshot below shows two rows of buttons. Those two rows are two separate div blocks.

Capture
Capture956×194 11.6 KB

I want the 2nd row to be visible only when I click either “Classics” or “Antifiction”. But since these buttons are part of a collection list, the moment I apply the show/hide interaction to one button as trigger, it automatically gets applied to others as well.

I do NOT want the second row to show if I click “Poetry” or “Fiction”.

In the ‘Trigger Settings’, I have even selected ‘Element’ and not ‘Class’

Capture2
I’m new to webflow so hope I was clear enough. Please let me know if any other info is required for resolution

Here is my public share link: Read-Only link
and the Staging site link

Interaction with Single Item in Collection List
Individual Interactions on a Collection Item
#3

Maybe there is a different approach… not using interactions (I can’t figure how you could use them here, as they all have the same class)

Try using sub categories in the Gen Cat T1 … then only fill the subs in the two where you need them…

Not sure if that works later on in your model…

#4

Hey Jonathan! Thanks a lot for replying!

I’m sorry but I don’t really follow your solution. How do I show/hide any element without using interactions? I’m new with webflow and all the googling is directing me towards interactions only.

#5

  1. In the first div, double the fields the are creating your buttons. So that you get two buttons each time. (2 poetry buttons, 2 classics etc…). But the second button will have a different class or an extra class. Now make that second button display:hidden by default.

  2. use custom code and pseudo classes to target only the items you want and A/ unhide the second button and B/ hide the first one.

↑ now you have a list that looks like your old one but the buttons in the items don’t have the same classe.

  1. hook your IX triggers to the appropriate buttons, limit to class.
2 Likes
#6

Thanks a ton for your response Vincent!

I made a duplicate button of each in the first row, and gave them separate classes. But I kind of lost track at point 2. Since I don’t know any code, can this be done without code somehow?