asked on

How to show/hide multiple independent DIVS with javascript (Two Seperate Elements)?

I'm in a bit of a predicament.

I need a quick and easy to implement solution preferably based in javascript.

I'm attempting to create a splash page that needs to use a show/hide feature for two different sections for the page.

Here is the idea.

First, you select a region which makes a list of locations show up for that region. This process is complete using the following javascript:

<script language="JavaScript">
//here you place the ids of every element you want.
var ids=new Array('a1','a2','a3','a4','a5','a6','a7','a8','b9','b10');

function switchid(id){	
	hideallids();
	showdiv(id);
}

function hideallids(){
	//loop through the array and hide each element by id
	for (var i=0;i<ids.length;i++){
		hidediv(ids[i]);
	}		  
}

function hidediv(id) {
	//safe function to hide an element with a specified id
	if (document.getElementById) { // DOM3 = IE5, NS6
		document.getElementById(id).style.display = 'none';
	}
	else {
		if (document.layers) { // Netscape 4
			document.id.display = 'none';
		}
		else { // IE 4
			document.all.id.style.display = 'none';
		}
	}
}

function showdiv(id) {
	//safe function to show an element with a specified id
		  
	if (document.getElementById) { // DOM3 = IE5, NS6
		document.getElementById(id).style.display = 'block';
	}
	else {
		if (document.layers) { // Netscape 4
			document.id.display = 'block';
		}
		else { // IE 4
			document.all.id.style.display = 'block';
		}
	}
}


</script>

Open in new window

The second part is where the script above can no longer support my needs.

After selecting the region you can select one of the locations which would then show/hide a variety of information about that location.

Essentially, I have one show/hide script that works for selecting a region which shows the locations in that region. Now, I need to add an additional component that allows me to select the location and show information about that location without screwing everything else up. All on one page. No database. Yikes!

Any help would be greatly appreciate!

Proculopsis

Does something like this help:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_26923293.html</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

jQuery(document).ready( function() {

  $("#show-all").click( showAll );
  $("#hide-all").click( hideAll );
 
});

function showAll() {
  $(".splash").show();
}

function hideAll() {
  $(".splash").hide();
}

</script>
<style>
.splash { float: left; border: 1px dashed red; margin: 12px; padding: 12px; background-color: white; }
</style>
</head>
<body bgcolor="beige">

<input id="show-all" type="button" value="Show" />
<input id="hide-all" type="button" value="Hide" />
<br />

<div id='a1' class="splash">a1</div>
<div id='a2' class="splash">a2</div>
<div id='a3' class="splash">a3</div>
<div id='a4' class="splash">a4</div>
<div id='a5' class="splash">a5</div>
<div id='a6' class="splash">a6</div>
<div id='a7' class="splash">a7</div>
<div id='a8' class="splash">a8</div>
<div id='b9' class="splash">b9</div>
<div id='b10' class="splash">b10</div>

</body>
</html>

Open in new window

SysAdmin1030

ASKER

Hi Proculopsis,

This is basically what the javascript I have does except switches out element by element rather than by all of them.

What I would need next is for each of those elements 'a1'....'a10' to be able to open up new information by a click.

For example if you clicked 'a1' it would list 'a5', 'a6' (which my javascript above does) then you if select 'a5' I need it to display 'a8' below.

Does this make sense?

I appreciate your help!

ASKER CERTIFIED SOLUTION

Proculopsis

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

SysAdmin1030

ASKER

The answers where all correct but they did not give me the result necessary; mainly because I could not explain the question well enough.