Div with dynamic height pushing down content without leaving blank whitespace.

[sqnkov]

Hello guys,

I am building a simple push-down effect which affects the position of two containers. So far I have managed to achieve a near-desired effect using fixed positioning for the hidden container, while changing its position to relative for the opened state.

I want to apply a smooth transition to the blue main div, which is being pushed down by the hidden div with a class of .sub-header. How can I bypass the choppy rearrangement of the containers and is there a more elegant way of doing this instead of switching positioning on click? (e.g. fixed to relative in this case)

NOTE: The heights of the current divs are fixed values, but I need this to be able to handle dynamic changes in the .sub-header height.

NOTE: This should be achieved by adding a custom class, not using jQuery’s nested effects like .slideToggle etc.</b>

Here is the Fiddle.

I am getting really frustrated about this. Maybe this can be done by Javascript in some way?

Thank You all in advance!

[Beverleyh]

If you don’t want to use jQuery (and it’s SlideUp/SlideDown methods), how about using Velocity.js instead. It handles the animation part in conjunction with a custom addition or removal of a trigger class. I did something like what you’re doing (dynamic-height content, that expands vertically to push stuff underneath down too) so maybe you can extract the bits you need from this http://blog.fofwebdesign.co.uk/29-slideup-slidedown-content-without-jquery-velocityjs

[Author]

Posts