[thelist] RE: [off thelist] Javascript Show/Hide DIV

Ken Kogler ken.kogler at cph.org
Mon Jun 24 11:46:01 CDT 2002


Thank you, Paul.. .works like a charm!

I like the Get Smart references in there, too... :)

-Ken

-----Original Message-----
From: thelist-admin at lists.evolt.org
[mailto:thelist-admin at lists.evolt.org]On Behalf Of Paul Backhouse
Sent: Monday, June 24, 2002 10:41 AM
To: thelist at lists.evolt.org
Subject: RE: [thelist] Javascript Show/Hide DIV


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


<!-- in BODY of document -->

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

<!-- CLICK LINK TO SHOW LAYER -->

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

cheers

Skuff

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

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

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

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