[thelist] Javascript Show/Hide DIV

Paul Backhouse paul.backhouse at 2cs.com
Mon Jun 24 10:42:00 CDT 2002

Try this function - best ive found and its good cross browser compatibility:

<!-- in HEAD of document -->
<script language="javascript">
var state = 'hidden';

function showhide(layer_ref) {

if (state == 'visible') {
state = 'hidden';
else {
state = 'visible';
if (document.all) { //IS IE 4 or 5 (or 6 beta)
eval( "document.all." + layer_ref + ".style.visibility = state");
if (document.layers) { //IS NETSCAPE 4 or below
document.layers[layer_ref].visibility = state;
if (document.getElementById && !document.all) {
maxwell_smart = document.getElementById(layer_ref);
maxwell_smart.style.visibility = state;

<!-- in BODY of document -->

<div id="agent99" style="position:absolute; top:103px; left:153px;
your stuff to show here


<a href="javascript://" onclick="showhide('agent99');">click me</a>



-----Original Message-----
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:

The JavaScript:
function showhide() {
  if (document.getElementById("mydiv").className = "divHide") {
    document.getElementById("mydiv").className = "divShow";
  } else {
    document.getElementById("mydiv").className = "divHide";

The CSS:
#mydiv {
  position: absolute;
  left: 121px;
  top: 75px;
  width: 438px;
  height: 400px;
  overflow: scroll;
  padding-left: 10px;
  padding-right: 10px;
  background-color: #ffffcc;
.divShow { visibility: visible; }
.divHide { visibility: hidden; }

<div id="devo" class="devoHide">
  Blah blah blah...

The show part works great, but clicking the link again does not get the div
to reset back to it's hidden state. What am I doing wrong?

Thanks in advance, folks!


For unsubscribe and other options, including
the Tip Harvester and archive of thelist go to:
http://lists.evolt.org Workers of the Web, evolt !

More information about the thelist mailing list