Save Space - Expandable Content Box

August 5, 2007

Finding your Blog or website to getting a bit cluttered? Here’s a very simple to use solution that can save lot’s of page space and just make your site more user friendly in general.

Last week I found this script. It’s a Javascript based script which allows you to place a wrapper around any content you wish. The wrapper then hides all that content inside a small labeled box until such time as someone clicks the “open” symbol. Then the box will expand to the full size necessary to display all the material. The nice part is that it will dynamically push all existing content below the box down the page making room for the new content.

For purposes of example and just because I think it’s a good idea, I’ve implemented this script right here on this blog. Just take a look on the right hand side of the page and you’ll see the “Archives” expanding box. Go ahead, give her a click. See? badda boom, you now have an expanded listing of all the archives. Admittedly at the time of this post there are few archives listing to worry about, but in time that list will become very long and cumbersome taking up lots of valuble space for no good reason. But not anymore…. That list can grow to hundreds of entries and yet until someone chooses to view them, they will only take up but a few vertical pixels. Nice huh?

I plan eventually to use this same method to display all the labels for this site. Even at this early point in the Blog’s history we already have dozens of labels which, if listed, would take up far too much space in our navigation bar.

So! How to do it? It’s simple and won’t take you but a few minutes.

The good people at Flooble.com have built a “wizard” for you. Just plug in your desired attributes and it will generate the code for you…

Posted in Tutorials, Web Design