When hovering .wrapper, it's child element .contents should animate from 0px to it's natural width. Then when the mouse is removed from .wrapper, it should animate back down to 0px. The .wrapper element should only be as wide as it needs to be (allowing .contents to grow), so .wrapper should grow in width and shrink in width as .contents does. There should be no set width for .contents. I'm using CSS3, but it could be accomplished in jQuery, that would be fine.

The problem:
See the JSfiddle

.wrapper is not only as wide as it needs to be.

when .contents grows, when it's almost at it's full width, it jumps down to the next line

When hovering off of .wrapper, .contents vanishes, when it should animate down to 0px

HTML

<div class="wrapper">
<span>+</span>
<div class="contents">These are the contents of this div</div>
</div>

SO close, the last thing to accomplish is getting .wrapper to get bigger and smaller in width as needed, I've been trying for a bit but I can't get it. This was #1 above in the list, maybe I didn't explain that one very well. So the wrapper should only be as big as the "+" with equal padding on all sides. Then .wrapper grows in width as .contents does. I thought this was going to be super simple to do, but I've had so much trouble with it.
–
android.nickOct 22 '11 at 19:56