Streaming live at 10am (PST)

Showing/hiding a div using a click interaction that changes height:0 to height:auto


#1

I've got a div called Nav Dropdown, which is a box with 1 text element and 2 buttons in it (nested in their own div).

I've got the whole thing set invisible on page load, and then I have a button in my nav that shows/hides this Nav Dropdown div.

I tried to create animation on the show/hide, having it start from 0px height and then expand to auto height, and then the reverse, like in the tutorial: http://tutorials.webflow.com/click-to-show-hide

What's happening is that the objects inside my nav dropdown div aren't expanding, they're just blinking on while the box behind them does the animation... which looks pretty clunky.

Any thoughts?


#2

Your statement is actually right, hiding a div this way only affects the div. But if you set the div to overflow:hidden, then it will mask its content while it shrinks.


#3

Thanks for the quick reply Vincent!

That got me most of the way there, next issue is that even though I'm setting Step 1 as 0 px high, it's appearing in the frame with about 10 pixels in height... is there something forcing it to be that tall?

Here's what it looks like: http://truelinkfinancial.webflow.com/ (click on the "Sign up" link).

Thanks!


#4

You may have your box model understanding wrong wink

Look for what's the box model is on Google. You'll get that margins, padding, borders affect the dimensions of a div, or not. When you build this kind of behavior, the best is to nest your final element into an upper div that only has borders defined. So when you set it to height:0, it's going to disappear entirely. Most likely here you have margins that aren't affected by your height:0 command.


#5

I took a peek at the link in your URL but I think it was changed since the post date, however, I tried to make a small demo to demonstrate the "Show/HIde" method you saw in our tutorials. It might not be of use right now, but if you send me your read-only link I can make the demo a little more comprehensive if you need me to.

Check it out here: https://webflow.com/design/demokit?preview=72388b288a26874be319ca1f7412d4eb Click on the page titled "Click to Show and Hide"


#6

Thanks so much both of you!

You were totally right that I had to nest it in an upper div... and then had to fight with the divs a bit to figure out where to make it relative, where to set the width, etc.

Confusing stuff, but when it works, it's awesome!


#7

overflow:hidden works great unless the navbar contains a dropdown menu – any work arround for this?


#8

This is a really nice demo. Thank you. This should be linked from the tutorials section. It shows how much can be done with a little ingenuity.


#9