Using CMS: How to click-to-show an element but hide all other elements of that class on page

Howdy y’all,

I’ve been struggling a bit to figure out how to properly accomplish the following interaction.

  1. User clicks name of CMS item from list
  2. CMS item’s video and caption are shown
  3. User clicks name of other CMS item
  4. The previous CMS item’s video and caption are hidden, the new CMS item’s video and caption are shown.

The issue is, I can’t figure out how to do that.

How can you click to show the child element but hide all other elements of that class using interactions?


Here is my public share link: https://preview.webflow.com/preview/guy-name?utm_medium=preview_link&utm_source=dashboard&utm_content=guy-name&preview=7645c1fa39bee082b23acf4f147fba76&mode=preview

No way by interaction. You should use custom js code (effect ± like tabs effect. Show this and hide all others).

Maybe add a screenshot of the flow (hard to answer like this).

Thanks @Siton_Systems for coming in here.

My public share link sort of shows the problem in motion, but this is the issue:

User sees list of CMS items:

User clicks CMS item, and that item’s associated CMS-uploaded content is revealed

As it stands now, when the user clicks another CMS item, I can’t find a way to hide the interaction from the previous item-click.

Totally understood if this is a JS only thing, but is there any direction you might be able to point me in for this?

Just wanted to bump this. Is there anyone that can point me in the right direction?

Did you ever solve this?

Hey, Idk if this will work, but maybe you can try dropdown menus as your toggles, it’s a built-in feature that if you click on a dropdown menu, it closes any other open dropdown menus on the pages. You can customize them they way you want so that they function is merely buttons and they actually disappear on dropdown menu close.