Here’s a little thing I put together that hides a comment form (or whatever) until the user requests it, and then shows it with a nice little CSS3 animation. I’m planning to use it on the Kennedy Park Disc Golf Forum once we get a little more content in there.
The CSS here is not terribly complicated, but there’s a few things to take note of. Most of what makes this “fancy” is in the CSS3 transitions and animations, but even these new methods depend on good old CSS positioning. To get started, the elements you see here, the article and form, are inside of a container div with position: relative; set on it. This doesn’t do much except to make it available to be positioned, or to have other positioned elements work with it. Notice that most of the styles applied to the article are just for show.
The article is also using position: relative;. The form, however, is using position: absolute;, which takes it out of the normal flow of the document. This allows us to use z-index to put it behind the relatively positioned article.
The animation is triggered when the “add” or “cancel” links are clicked. When they’re clicked, jQuery adds or removes a class that has a CSS animation attached to it. It’s all pretty simple but it ties together to make a nice effect.
Keep in mind that in a real-world situation, you would use Modernizr to detect css animation support, and you would also probably use more specific selectors. It’s also probably not the kind of thing you’d want to do on mobile devices, either, but that’s what media queries are for.
Go ahead and screw around with it on CodePen or fork it on GitHub.
Very late update
This was originally posted at jsFiddle, but I ported it over to CodePen to simplify things. This worked fine in 2011, but I made a few updates to reflect improvements in CSS since then.