[thelist] Javascript Show/Hide DIV

Ken Kogler ken.kogler at cph.org
Mon Jun 24 10:35: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:

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; }

The HTML:
=========
<div id="devo" class="devoHide">
  Blah blah blah...
</div>


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!

-Ken




More information about the thelist mailing list