How to show and hide content

I’m working on my home page and planning to upload all my blog posts there. There is going to be so much information in a few weeks, and I believe showing and hiding content could be really helpful.

The purpose behind showing and hiding content is to save space. As a viewer, you might just need a short description of each post when browsing a blog, and if you find something interesting, you can hover and learn more. As a blogger, showing and hiding content allows you to keep the most important thing on the webpage and offers more content for the viewers if they are interested.

To start with, we need a division in the HTML file.

Then let’s have a look at the CSS file that really makes things work.

By choosing the max-height of foldout, you can decide how many lines you want to show for your short version. My 33 pixels are about two lines. Make sure that the max-height of foldout when hovering is large enough to hold your full content.

The transition function is slightly different for each browser. “-webkit-transition” in my code is just for Safari and Chrome, while “-moz-transition” is for Firefox and “-o-transition” is for Opera. You can also adjust for how long the full content will stay on the screen when you move your mouse away. I would like to set it as 1s because I assume the viewer has finished reading when hovering off the content and I don’t want the content bubble to be annoying.

This is how it looks when it appears in short version:

This is how it looks when hovering over the content:

It is just a pretty basic content bubble and I have tried to make the code easy to understand. I hope you all enjoy my post.

Yang Chen

~ by yangchen29 on September 27, 2012.

%d bloggers like this: