Show/hide content with multiple elements

Hi!

I have several logos(left) on which i would like to show content (right) when i click one of them. When i click on an other logo it has to show the contents of that logo and hide the content of the logo that was shown before. Preferably it would be best to load the content through a collection.

Like for example is it possible to link to the logo’s to tabs in the tab component? (like logo 1 to tab 1, logo 2 to tab 2, etc…) the logos are in column 1 and the content in column 2.

Any suggestions on what might be the best solution for this?

http://test-zoev.webflow.io/


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

So you want to click each individual button. Then - on the right - show that button’s logo and description?

Yes that’s right.

I managed to do this with the tab component and with the logo’s under the tabs. But in my example the logos are in a different column. So i wonder if that is possible?

And it would be great if the content can be updated through a cms collection. I managed this now by limiting the amount of items to 1 in each tab pane. So an automated tab connected to the CMS is not available yet i read on the forum.

Thanks

Okay, I see. I would lean towards using the tab component if you’re planning on populating with cms elements. I think that would be easier than layering each div stacked on top each other.

But then, your tab menus are not as easy to layout, you’re sort of locked into a simple layout. With divs, you could move things around easily. Not sure which is best for you. I’d start with tabs. That way you can insert each logo block into it’s own tab. Which could grow if you needed more content.

It 's now a simple layout with the tab component. The tab component also makes the interactions easier.

I’ll post a link when i’m finished.

Thanks for now!

No problem. Have fun!