Show/hide content on click AND hide all other content

Hello, I have a question regarding show/hide content on click.
I have a list of ‘more information’ buttons that show more information about a certain part of a list. (for context, it’s a website where the program of a course can be displayed.

What I’m trying to figure out is how to make a click on 1 ‘more information’ will close the others, without having to make a new interaction for every single item that refers to every single item (which would be a lot of interactions, 169 if you’re interested.)

Anyway can this be done in a simpler way?

I have tried to make an interaction that would hide every item with the same class. This doesn’t work because the interaction interface only lets you select class/selected item as a whole. It doesn’t let you first close all the items then show only the item below it.

I have also tried to place all the items inside another div block. Then making the interaction on the item hide all the div blocks, and then let the other interaction show/hide the item, which is placed in a column, inside. This also doesn’t work because the column inherits the show/hide value from the div where it is placed inside.

Because the website has a kind of 2 column design the amount of tekst in the left column has to be restricted to a certain amount of space, else the text will continue over the sections below.

I hope someone has ran into this issue before and can give me their fix.

Any help would be appreciated!


Here is my public share link: https://preview.webflow.com/preview/fair-academy?utm_medium=preview_link&utm_source=dashboard&utm_content=fair-academy&preview=8642cd743327ca2c56e2db2b609cf555&mode=preview

1 Like

Hey @luuk_kadijk!

You need to create a "second click’ interaction to close the information.

It will just close the current information because you selected “limit to sibling elements”.

Eve Kayser