Toggling content visibility

11/04/2007 | Filed under Develop > JavaScript

Clean, well-structured JavaScript can help you conserve space on your web pages by hiding some of the content, as Steve Tucker demonstrates

When Tim Berners-Lee first brought together the founding elements of the World Wide Web, one thing motivated his actions: better communication. It’s the answer to why the internet has been so successful: it gives everyone a voice. Influential bodies, such as Flickr and YouTube, MySpace and Delicious, may vary in content and appeal to different social groups, but they all share the same fundamental attributes of connecting people across the globe.

Of course, with every communication medium, there are boundaries and restrictions. For example, while the length of this tutorial is limited by page count, a website designer is limited by the screen resolution of website users. We only have so much canvas on which to paint our masterpiece. So how do we utilise what we have available most effectively?

Information structure and good organisation are both key factors. These are skills that must become second nature if you’re to become an expert in any media format. In web design, if you fail to organise your page information correctly, your visitors will become frustrated and hit the back button. Ultimately, your site will fail. As a professional of your trade, however, you have one unique and powerful ally that could prove very useful: JavaScript.

Click here to download the tutorial files.
Click here to download the tutorial PDF.

Comments

Gartenfackeln / 15/04/2007 / 07:52 / http://www.villacasa.de

thank you very much for this excellent article. It is very neccessary to understand java scripts

Ty / 16/04/2007 / 16:07

More JS goodies from Steve-O. I especially like the part analyzing if and when to use the content toggle in the first place. I can't wait for Steve's next JS guru column.

Kyle Meyer / 16/04/2007 / 16:20 / http://www.astheria.com

The most valuable piece of this article is all under the section of "Ask yourself the question – do I need it?", I'm seeing more and more sites using javascript to hide content unless it's requested when there is plenty of page space and the content is relevant for the page, this is easily looked at from the perspective of "How many clicks does it take to get to content you want?" Unnecessary show/hide activity are just extra hurdles in the way of the user. But don't get me wrong, on a page with bountiful content show/hide activity is a great solution.

John Brunskill / 24/04/2007 / 02:25 / http://www.web.atyourcommand.com.au

Steve, thanks so much for the script that was just as you said in the notes.
I have never got something working so quickly and easily before with such great results.
It was perfect in Firefox and Safari.
* *I did not test the site in IE6 until yesterday and unfortunately the "more information" links do not appear but the div hides and closes well.

Are there some tips that you may know of to fix this for this browser?

Thanks for the superb developement work.

John

Tim / 24/05/2007 / 20:04

Where can I find the getElementsByClass function?

Tim / 24/05/2007 / 20:05

Found it. Ignore me

Ken / 07/06/2007 / 06:18

steve, great info as always.
how would you go about toggling info in javascript, by using images?