vir·tu': excellence or merit in objects of art

Here's something cool that you can do from within your administrative control panel: hide and show text blocks on user click.

When you first viewed the page, this content was not visible. But when you clicked the line above, it gracefully slid into view.

If you click the link again, it'll slide out and disappear.

This is something you can do on your site as well.  This feature is available both in primary page content and in blogs.  Read more below to find out how to do this.


Click to reveal!
There are two magical styles that you'll need to create.  The first one is called "clickToRevealLink", and the second is called "clickToRevealContent".  When you create these styles in your style module, be sure to name them exactly, including the upper and lower case.  You can define those styles however you like.  A very basic styling might look like this:

border:1px solid black;

Once these magical styles are created, you can use them anywhere you like.  Here's what happens: if you use the clickToRevealLink style in a page, and a user clicks on that text, the user's browser will search through the following text until it finds the very next paragraph that uses the clickToRevealContent style.  If the style is found, that paragraph will slide open.

Note that you don't need to have the link and content styles adjacent to each other, though in most cases that's what you'll want to do!

You can, of course, get more "fancy" with your styling of the clickToReveal styles. I uploaded a bullet image (the star) into one of my image galleries, and then used the background-image style to insert the image to the left of the text.  You can also use fancy properties like border-radius and box-shadow to make your content prettier.

Bear in mind, however, that some styles like border-radius and box-shadow have (as of the writing of this blog post) non-standard implementation between browsers.  In other words, you may need multiple style definitions in order to guarantee that your style works well in all browsers.

Welcome to the wonderful world of styling on the internet. :P