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.
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.
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?
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.
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.
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.
