Hide and show interaction keeps stacking elements

Design help Animations & Interactions
1

Hey guys!

I’m developing a page where I have some “bios” of coworkers. I made an interaction which when I click to a defined photo, the bio appears below of that section. The problem is that, because it’s activated by a click, it doesn’t disappear unless I click the same photo for a second time, so if I don’t do it and I click to another one the bios starts stacking one above the other, pushing the content below it.

Is there any way that when I click in another photo, the previous bio disappears to replace with the last one I clicked?

Here is my read only, hope i’ve been clear and you could help! Thanks a lot!

https://preview.webflow.com/preview/zavala-patmark?utm_medium=preview_link&utm_source=designer&utm_content=zavala-patmark&preview=edd1f726686b5594833662cef17828b1&pageId=5e792afb29308c180644f046&mode=preview

Screen Shot 2020-03-24 at 13.12.21
Screen Shot 2020-03-24 at 13.12.21798×981 129 KB

Screen Shot 2020-03-24 at 13.12.27
Screen Shot 2020-03-24 at 13.12.27987×1228 192 KB

Regards.

2

There’s 3 ways I can think of to create what you’re looking for.

  1. Tabs. Each profile picture should be a TabLink and the bio should be in the Tab content, You can set the default display state of the Tab content to be hidden and change display state when clicking on the TabLink.

  2. Interactions. All 3 bios should be in one div with auto heights, each bio div should be default display state to hidden. set an interaction to each profile picture to open the relevant bio and close the two others.

  3. Modal. Clicking on each profile should open a popup modal, only when closing it will be able to click on the other profiles.

I hope this helps…

3

Awesome, I found very handy the “Tabs” option.

Now the thing is that I have another line of coworkers after the first one. Is there a way that with the double click on te same “tab link” the “tab content” gets back to its initial ‘non display’ state? or by clicking the new “tab link” below it, maybe? or any other solution comes in mind for this? Im not sure if doing it by interactions could get a bit messy.

(you could check all this at the same read only link) thanks a lot for your time!

4

You would be able to archive it by adding a hidden div in each tablink. add an interaction to the navlink class, on click, to show this div. and an interaction on this div, on click, to hide the content (and himself).

I personally would go with the popup modal in this case… Either way is good.

5

Hey thanks for the help!

Indeed It all went a bit messy with interactions affecting the other .divs.
I changed for modals and is the best decision for this case.
Have a good one!

1 Like