Hiding & showing sections on click interaction not working

Hey there,

I have been working on developing my portfolio site which is meant to be a single page website that hides and shows the appropriate sections on click while also hiding and showing internal content wrappers to help with optimization. The latter was successful, the former not so much.

I have been trying to hide and show the main section with a secondary containing project pages and blog posts when clicking the projects button in the hero section. The main section disappears, but the secondary does not come back despite there being a hide show attached to it. I thought it might be due to the interaction being applied to all of the same class, but that didn’t seem to be the case.

Can someone explain to me where I am going wrong or at least how to build what I envision if there is something flawed in my design.

Please let me know if you need any more info, or designs/ wireframes that more visual explain what I’m trying to do.

  • (General tiding recommendations are good too; I’m still working on the best way to build things in the designer)

Here is my public share link: LINK

Hi Robert,

If you remove the ‘initial state’ in your interactin, does it work?

** I am not sure I completely understand what you are trying to do… :frowning_face:
An extra visualization would be great.

@avivtech Doesn’t look like removing the initial states changes anything.

The main idea is this:
I have 2 sections that I want to occupy the same space, but to be unloaded (hidden) until activated to keep unnecessary content off screen since I am trying to build the site to be a single page.

When you click the projects button what is supposed to occur is:

  1. the main section ‘Hides’
  2. The secondary section is set to ‘Position: Flex’, revealing the hidden section.

Actions inverse when pressing the close button within the secondary section, thereby hiding it and unhiding the Main section (section 1 in the example).

What occurs instead is when the button is pressed, the main section hides, but the secondary does not, despite being set to display; leaving just the body visible. I’m not sure whats wrong.

@avivtech I think I resolved the issues after a lot of fiddling. I’m not 100% sure, but I think the issue may have had to do with some settings on the secondary section. I have been able to get it to function properly.

Still though, I am not sure if this is the best way to accomplish what I want or not. Feel free to make some suggestions if you know of a better way!