Streaming live at 10am (PST)

Show/Hide Problem


#1

I'm having an issue with showing/hiding a section by using the Height property in Interactions. When the section is shown, there are no problems. However, when it is hidden (both on load, and when it's closed again), the section doesn't completely hide itself. In addition, when it's hidden, the section below is distended and displays improperly. The section for the show/hide is "Residential Construction," and the button to show and hide it is the "Service Qard" field labeled Residential Construction. Preview link is here: https://preview.webflow.com/preview/premierbg?preview=bf209b7fdec48c957230c64189abdf02

Screenshot 1 - "Residential Construction" as Hidden

Screenshot 2 - "Residential Construction" as Shown

Screenshot 3 - Distended section when Hidden

Screenshot 4 - Interactions


My latest design project. Feedback appreciated
#2

Hey @jordanshotwell

I used to encounter this issue before as well. A solution I have found to resolve it is to do add the following steps to the interactions, both on first click & second click.

Here is a great tutorial to watch over it: http://tutorials.webflow.com/click-to-show-hide

Firstly, make sure that your items you are showing are set to display none: height 0px, and 0% opacity on load (aka the initial appearance):

Then on first click, you can change the interaction to:
Display: block, height 0px, 0% opacity (all set to 0ms delay, so there's no action happening yet in the first step)

Next Step:
Height: auto, Opacity 100% (whatever delay you'd like to use here, usually works best when they are identical or if you have a delayed opacity depending upon the desired effect and taste honestly).

Then on Second click, you basically just do all of those steps, but in reverse, and be sure to add in the final steps of:
Second to Last Step: 0% opacity, 0px height
Last Step: Display: None

Let me know if you have any questions. smiley

Thank you,

Waldo smiley


#3

I also prefer doing a display none on second click or as the interaction on the element with the closing interaction, typically smoother. smile @jordanshotwell


#4

Thanks @Waldo_Broodryk. I'm still getting a stutter when clicked. I opted to not use the Opacity, so that's not included, but the section title ("Our Projects") is still showing for a brief moment before the section is hidden. I followed the steps above, with the two separate interaction steps for the first and second clicks. The preview link is the same. Any idea on how to correct this?


#5

Did you try the opacity part? Or just doing display none instead of the height animation on close? Or is the stutter there for both open and close? Sorry I'm on my phone until late tonight.


#6

I did try the opacity, that's just a matter of preference. However, the stutter is there regardless, on open and close. Any help is appreciated!


#7

Solved it! smile

Okay, so here's the solution, remove your padding from the parent container, it's that padding which is leaving height behind to that container (Residential Container)

Then! Keep set your overflow: hidden.

Now, go ahead and add padding to the top element and the bottom element (you had 40px of padding on top & bottom of the Residential Construction section), so I went ahead and added 40px of padding to the h2 on top, and 40px of bottom padding to the Renovation Text box.

Voila, pixel perfect, smooth as butter, expand & collapse. Be sure to only have the interaction on "first click" for both expand & collapse element interactions as they each only have one interaction.:D smiley smiley

Thank you fellow Webflow expert for pointing out the padding piece smiley @Arthur Nice work @jordanshotwell

Thanks,

Waldo


#8

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.