Sliding Div on hover with dynamic contents

[ArmsVsLegs]

Hi gang,

I want to have a Div (call it ‘Wrapper’) with another Div inside (call it ‘Contents’), and Contents gradually expands when Wrapper or Contents is hovered over. Contents starts at height 0, and expands to a certain height.

However, I’ve no idea what that height will be! So I can’t just use a CSS thing of on hover adjust to a certain size…

Please can you help? Thanks a lot ahead of time for any answers!

[CodeGraphics]

Check [this](http://codepen.io/alex13/pen/qDycl “”).

[CrocoDillon]

Without JavaScript, I don’t know if it’s possible. You can set `height: auto;` on hover like this: http://jsfiddle.net/N8mEK/, but you can’t use transitions on a property with ‘auto’ value. Not sure if you wanted it to expand smoothly or not though :)

[ArmsVsLegs]

@CodeGraphics: link doesn’t work (503 error)! Please could you put the solution in JSFiddle for me?

@Crocodillon: That’s ace, thanks pal! I was kind of hoping for smooth transitions, and am happy for a JavaScript solution.

[CrocoDillon]

CodePen seems down, just wait till it’s back up and you’ll be able to see CodeGraphics Pen… I guess.

JavaScript with jQuery is easy enough: http://jsfiddle.net/N8mEK/1/

[jurotek]

You could maybe set it to some reasonable height and apply overflow auto and if the content height is greater than height of the box you could scroll through it. Don’t know how useful that would be tho. [Here’s the link…](http://jsfiddle.net/Z8wve/21/ “”)

[ArmsVsLegs]

That’s cool CrocoDilloBro, thanks a lot for doing that.

One thing I can’t help but notice is that if you start the slide, move your mouse away, and then move it over again that it freezes mid anim. It seems to do this regardless of if I include the stop or not.

Any ideas?

[CrocoDillon]

Buggy… putting stop only on slideUp seems to fix that.

[ArmsVsLegs]

Works perfectly, thanks CrocoDilloMan!

[CrocoDillon]

Yw :P

[Author]

Posts