Toggling Web Trends..

Posted by Marc Bernstein on October 28th, 2005.

Marc Bernstein has posted 5 articles.

RSS Feed for fadtastic.net RSS Feed for Marc Bernstein

It seems everyone these days are allowing users to hide/show (toggle) content on demand. The code is a variation of using javascript and the DOM to change an object’s display properties.

The basic code:
function toggle() {


     if (document.getElementById('yourID').style.display == 'none')

     {

          document.getElementById(yourID').style.display = '';

		 }
	 else

	 {

	 	document.getElementById(yourID').style.display = 'none';

	 }

I’ve used this code in a number of my projects and find it very helpful for organizing a page with numerous amounts of content being displayed.

Other Sites using a form of this code:

http://www.netflix.com
http://www.minimalweb.de/
http://dulcimer.codylindley.com/#on1

Share This

( 11 so far )

Comments RSS Feed

I’ve used it too, but one of the problems is (especially when used as on that Minimal Web portfolio) when a Google visitor arrives. Google will obviously index the hidden content, but when the visitor gets to the page it’s not visible.

Paul Farnell
October 28th, 2005
#

funny how i posted something about this on stylegala a week ago, asking for help w/this same trick, and now everyone is talking about it… interestingly i still need help…

Brian Breslin
October 28th, 2005
#

Paul: what was your problem, maybe someone here can help you find a solution.

Brian: Interesting observation Brian, I never thought about that.

Marc Bernstein
October 28th, 2005
#

I’ll have to submit my link once my project goes live with this technique, maybe you can update the post with a link to it.

just trying to hack apart the IE bugs in my layout now..

Brian Breslin
October 28th, 2005
#

Although I’m not a fan of this hidden content, the ‘latest blogs’ section here uses this technique nicely:

http://www.forgetfoo.com/

Andrew Faulkner
October 30th, 2005
#

I’ve used something similar on my site’s navigation to show some information about the link but it was done in CSS, not in Javascript.

Basically you set a span display:none and on hover you set display to block.

See http://www.huyser.net/

Kees Huyser
October 31st, 2005
#

That’s really interesting, Kees. Does this method work across browsers? Including certain awkward ones? ;)

Andrew Faulkner
October 31st, 2005
#

Andrew: It works cross-brower; at least I’ve tried it in Safari, FireFox and (win) IE6.

I figure that if those browers work I’ve got 99.3% of the online population covered…

Voice browers I haven’t tried, but I think they will just speak the comment in the span; “about; rumours and facts”.

If you have acces to ‘akward’ browsers, could you try the site and report back on wether it works? t.i.a.

Kees Huyser
October 31st, 2005
#

I’m not one to be rude, but have you missed a closing bracket in your Javascript?

I use it in forms mainly, for instance: I have a element to choose the subject of a message, and one choice is ‘Other’, when this is selected a textbox appears to the right, with the words, ‘please elaborate’ to the side. It’s small things like this that make forms more interesting for me.

tekp
November 10th, 2005
#

@tekp Thanks, I noticed that too.. but I can’t edit a post after it’s been published :(

Marc Bernstein
November 10th, 2005
#

Kees’ solution can also be used to make pure CSS popup menus.
The complete code for the javascript is:
in the head:

javascript:
function toggle(yourID){
if (document.getElementById(yourID).style.display == ‘none’) {
document.getElementById(yourID).style.display = ”;
} else {
document.getElementById(yourID).style.display = ‘none’;
}
}

in the body:
<a href=”#” onClick=”toggle(’yourID’);”>toggle</a>

jono-san
December 12th, 2005
#

↑ Jump up to the comment form

The above post has obviously kept you amused. Why not discover similar material:

The posts Big Players (not) Using Trends, Call For TrendWatch Feedback/Beta Testers, Trends Past and Present, TrendWatch Test, TrendWatch Launched | (beta), are related to this post.

Or why not take time out to find out about the author of the post.