Streaming live at 10am (PST)

Apply interaction on a single CMS item

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


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

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…

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.

  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.
1 Like

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?