[thelist] Javascript Show/Hide DIV

Tom McMillen tgmcmillen at yahoo.co.uk
Mon Jun 24 10:46:01 CDT 2002

> I've got a simple DIV containing some text. The
> visibility of this DIV is
> set to 'hidden', and the idea is when they click the
> appropriate link, the
> visibility gets set to 'visible.'
> Pretty simple, right? You'd think so...
> I want one function to control the show/hide. Every
> example I've seen of
> something like this has had 2 elements - one
> button/link/graphic to show,
> and one more to hide. I just want one. Here's what I
> came up with:

This is what I use for that sort of functionality...
It works in Mozilla and IE

<script language="Javascript 1.2"
function show(id)
	el = document.getElementById(id);
	if (el.style.display == 'none')
		el.style.display = '';
		el = document.getElementById('more' + id);
		el.innerHTML = 'less...';
	} else {
		el.style.display = 'none';
		el = document.getElementById('more' + id);
		el.innerHTML = 'more...';


and then for your link...

<a id="moreinfo"
onclick="javascript:show('info');return false;"
href="info.html" target="_new">more...</a>

<div id="info" style="display: none">
Other Info in Here

This way if you create an info.html page, users who
don't have javascript enabled will still be able to
the extra stuff in a new page too.


Do You Yahoo!?
Everything you'll ever need on one web page
from News and Sport to Email and Music Charts

More information about the thelist mailing list