StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><del>No, not currently.</del> Yes, but only if you know the <code>height</code> or can animate the <code>font-size</code>.</p> <p>Originally, this wasn't the case. From <a href="http://html5doctor.com/the-details-and-summary-elements/" rel="nofollow noreferrer">http://html5doctor.com/the-details-and-summary-elements/</a>, <em>"...if you could use CSS transitions to animate the opening and closing, but we can’t just yet."</em> (There is a comment at HTML5 doctor near the end, but it appears to require JS to force the CSS animation.)</p> <p>It was possible to use different styles based on whether it's opened or closed, but transitions didn't "take" normally. Today, however, the transitions do work if you know the <code>height</code> or can animate the <code>font-size</code>. See <a href="http://codepen.io/morewry/pen/gbJvy" rel="nofollow noreferrer">http://codepen.io/morewry/pen/gbJvy</a> for examples and more details.</p> <p>This was the 2013 solution that kind of fakes it:</p> <p><strong>CSS</strong> (May need to add prefixes)</p> <pre><code>/* http://daneden.me/animate/ */ @keyframes fadeInDown { 0% { opacity: 0; transform: translateY(-1.25em); } 100% { opacity: 1; transform: translateY(0); } } .details-animated[open] { animation-name: fadeInDown; animation-duration: 0.5s; } </code></pre> <p><strong>HTML</strong></p> <pre><code><details class="details-animated"> <summary>CSS Animation - Summary</summary> Try using [Dan Eden's fadeInDown][1] to maybe fake it a little. Yay, some animation. </details> </code></pre> <p>This works today:</p> <p><strong>CSS</strong> (May need to add prefixes)</p> <pre><code>.details-animated { transition: height 1s ease; } .details-animated:not([open]) { height: 1.25em; } .details-animated[open] { height: 3.75em; } </code></pre> <p>PS: <del>Only tested in Chrome. Hear FF still doesn't support <code>details</code> in general.</del> IE and Edge still don't support <code>details</code>.</p> <p>(You can use keyframe animations or transitions to do all sorts of other animations for open. I've chosen <code>fadeInDown</code> for illustration purposes only. It is a reasonable choice which will give a similar feel if you are unable to add extra markup or will not know the height of the contents. Your options are, however, not limited to this: see the comments on this answer that include two alternatives, including the <code>font-size</code> approach.)</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload