html - Seeking an elegant, CSS-only method for hiding/showing auto-height content (with transitions)

Question

I'd like a method that uses only CSS transitions, to effectively (and attractively) hide/show content on hover.

The caveat being that I wish to keep dynamic (auto) height.

It seems that the optimal route would be to transition between a fixed height:0, to a height:auto, but alas this is not yet supported by transitions in browsers.

A clarification in response to the comments :: This isn't so much a question of waiting until all living browsers are CSS3 compatible, but rather addressing a perceived shortcoming of CSS3 itself (eg. the lack of height:0 > height:auto)

I've explored a few other ways, which can be viewed at the following fiddle (and elaborated below), but none of them satisfy me, and I'd love feedback/tips for other approaches.

http://jsfiddle.net/leifparker/PWbXp/1/

Base CSS

.content{
    -webkit-transition:all 0.5s ease-in-out;  
    -moz-transition:all 0.5s ease-in-out;
    transition:all 0.5s ease-in-out;
    overflow:hidden;
}

---

Variation #1 - The Max-Height Hack

.content { max-height:0px; }
.activator:hover +.content{ max-height:2000px; }

Cons

a. You'll need to arbitrarily set an upper max-height, which, with extensive dynamic content, could potentially cut off information.

b. If, as a precaution to (a), you resort to setting a very high upper max-height, the delay on animation becomes awkward, and untenable, as the browser invisibly transitions the entire distance. Also makes easing less visually effective.

---

Variation #2 - Padding and the Illusion of Growth

.content { padding:0px; height:0px; opacity:0; }
.activator:hover +.content { padding:10px 0px; height:auto; opacity:1; }

Cons

a. It's jarring. It's definitely slightly better than just popping the content out of nowhere, and the effect is further sold by transitioning the opacity, but overall it's not that visually slick.

---

Variation #3 - The Faulty Width-Only Approach

.content { width:0%; }
.activator:hover +.content{ width:100%; }

Cons

a. As the width shrinks, the line-wrap forces any extra text onto subsequent lines, and we end up with a super tall invisible div that still demands the real-estate.

---

Variation #4 - The Effective, but Jittery, Font-Size

.content {  font-size:0em; opacity:0; }
.activator:hover +.content{  font-size:1em; opacity:1; }

Cons

a. While this has a nice, sweeping sort of effect, the shifting of the line-wrap as the font grows causes unappealing jitter.

b. This only works for content consisting of text. Other transitions would need to be added to manage the scaling of inputs, and images, and while entirely viable, this would erode the simplicity.

---

Variation #5 - The Butteriness of Line-Height

.content { line-height:0em; opacity:0; }
.activator:hover +.content{ line-height:1.2em; opacity:1; }

Cons

a. My favorite aesthetically, but as with #4, this works most simply with text-only content.

---

Variation #6 - The Anti-Margin (as offered by @graphicdivine)

.wrapper_6 { min-height: 20px }
.wrapper_6 .activator {z-index:10; position: relative}
.wrapper_6 .content { margin-top: -100%; }
.wrapper_6 .activator:hover +.content{ margin-top: 0 }

Cons

a. There is a delay on hover which is not optimal. This is the result of the .content being tucked invisibly quite far up the screen, and taking time to animate downwards before appearing.

b. The margin-top: -100% is relative to the containing element's width. So, with fluid designs there's the potential that when the window is shrunk quite small, the margin-top wont be sufficient to keep the .content hidden.

---

As I said before, if only we could transition between height:0 and height:auto, this would all be moot.

Until then, any suggestions?

Thanks! Leif

Answer 1

Try this, The anti-margin:

.wrapper_6 { min-height: 20px }
.wrapper_6 .activator {z-index:10; position: relative}
.wrapper_6 .content { margin-top: -100%; }
.wrapper_6 .activator:hover +.content{ margin-top: 0 }

http://jsfiddle.net/PWbXp/