Using Javascript to hide and show divs

**Josh_** · Sep 11, 2007, 13:35

I think my code should pretty much speak for itself. I'm sure it's a bit over kill, but I'm unfamiliar with javascript.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
  <head>
        <title>JavaScript</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
<script language="javascript">
<!--

function WriteText(county)
{
 switch (county) {
  case "county1":
   document.getElementById(county).style.visibility="visible";
   document.getElementById("county2").style.visibility="hidden";
   document.getElementById("county3").style.visibility="hidden";
   document.getElementById("county4").style.visibility="hidden";
   document.getElementById("county5").style.visibility="hidden";
   break
  case "county2":
   document.getElementById(county).style.visibility="visible";
   document.getElementById("county1").style.visibility="hidden";
   document.getElementById("county3").style.visibility="hidden";
   document.getElementById("county4").style.visibility="hidden";
   document.getElementById("county5").style.visibility="hidden";
   break
  case "county3":
   document.getElementById(county).style.visibility="visible";
   document.getElementById("county2").style.visibility="hidden";
   document.getElementById("county1").style.visibility="hidden";
   document.getElementById("county4").style.visibility="hidden";
   document.getElementById("county5").style.visibility="hidden";
   break
  case "county4":
   document.getElementById(county).style.visibility="visible";
   document.getElementById("county2").style.visibility="hidden";
   document.getElementById("county3").style.visibility="hidden";
   document.getElementById("county1").style.visibility="hidden";
   document.getElementById("county5").style.visibility="hidden";
   break
  case "county5":
   document.getElementById(county).style.visibility="visible";
   document.getElementById("county2").style.visibility="hidden";
   document.getElementById("county3").style.visibility="hidden";
   document.getElementById("county4").style.visibility="hidden";
   document.getElementById("county1").style.visibility="hidden";
   break
}
   
}
// -->
</script>
<script type="text/css">


</script>

  </head>
<body>


<img src="map.gif" alt="map" border="0" usemap="#map"><br>

<br><br><br>

    


<map name="map">

<AREA SHAPE="poly" style="cursor:pointer;" onclick="WriteText('county1')"  ALT="" COORDS="73,236, 73,271, 70,275, 79,288, 321,291, 371,287, 381,308, 389,309, 395,308, 392,293, 408,284, 423,245, 395,244, 389,234">
<AREA SHAPE="poly" style="cursor:pointer;" onclick="WriteText('county2')"   ALT="" COORDS="257,237, 390,235, 392,243, 422,242, 410,228, 416,211, 466,192, 464,179, 477,155, 470,137, 452,119, 439,119, 439,129, 294,130, 293,138, 293,174, 253,171">
<AREA SHAPE="poly" style="cursor:pointer;" onclick="WriteText('county3')"   ALT="" COORDS="60,173, 56,186, 57,201, 64,199, 70,215, 71,234, 255,237, 251,171, 293,172, 291,138, 164,139, 161,171">
<AREA SHAPE="poly" style="cursor:pointer;" onclick="WriteText('county4')"   ALT="" COORDS="211,17, 396,15, 398,28, 409,36, 400,53, 422,93, 433,93, 440,108, 448,116, 453,118, 438,119, 438,128, 296,130, 291,136, 216,139, 214,139, 212,113, 209,113">
<AREA SHAPE="poly" style="cursor:pointer;" onclick="WriteText('county5')"   ALT="" COORDS="76,15, 30,14, 29,17, 30,19, 33,28, 30,32, 29,35, 36,41, 23,86, 57,171, 161,171, 163,138, 213,138, 211,113, 207,113, 207,17">
</MAP>

  <div style="height:200px; width:300px; border:1px solid #666;">
    <div id="county1" style="visibility:hidden;position:relative; left:1px; display:inline; border:1px solid black;">county 1 info</div>
    <div id="county2" style="visibility:hidden;position:relative; left:-75px; display:inline">county 2 info</div>
    <div id="county3" style="visibility:hidden;position:relative; left:-120px; display:inline ">county 3 info</div>
    <div id="county4" style="visibility:hidden;position:relative; left:-150px; display:inline">county 4 info</div>
    <div id="county5" style="visibility:hidden;position:relative; left:-180px; display:inline">county 5 info</div>
  </div>
</body>

</html>

Basically I need to have the divs appear and disappear, which I've figured out, but I need the text to show up in the same place, as opposed to beside the previous text or on top of it. I know there's easier ways of doing this with pure javascript, but I have to have the actual divs in the code.

Thanks

**felgall** · Sep 11, 2007, 14:28

Instead of changing the visibility (which shows or hides but still leaves space for the elements) set the display property to block and none instead.

**Josh_** · Sep 11, 2007, 14:41

Wow, that was considerably easier . Thank you very much

**bradical1379** · Sep 11, 2007, 14:46

Probably could streamline the function too:

Code:

function WriteText(county)
{
	var t = 5;
	
	for (i = 1; i <= t; i++) {
	
		if (county == ("county"+1) ) {
		
		document.getElementById(county).style.visibility="block";
	
		}
	
		else {
	
		document.getElementById("county" + i).style.visibility="none";
	
		}
		
	
	}
}

**Chroniclemaster1** · Sep 11, 2007, 16:01

If you're concerned about the overkill, Stephen and Tommy just help me work out several bugs out of my modified script. I was able to use several loops to more efficiently construct the javascript event handlers.

http://www.sitepoint.com/forums/showthread.php?t=500051

Oh, and I wouldn't recommend doing it with pure javascript, because that would cause accessibility problems (and that means SEO too). Keeping the content and links in XHTML is best practices, so you're right on.

**pixelita** · Sep 11, 2007, 20:34

I have something similar set up on a testbed photoblog here:
http://pixelpost.mytestbed.com

It's the show/hide image info and show/hide comments.

Feel freel to peek at the source code and copy and paste to your heart's content.

**Josh_** · Sep 13, 2007, 12:48

thanks for that for loop, it works great.

The SitePoint Forums have moved.

User Tag List

Thread: Using Javascript to hide and show divs

Thread Tools

Display

Using Javascript to hide and show divs

Bookmarks

Bookmarks

Posting Permissions