[JavaScript] hide show an array od div's

1,062 · March 6, 2008

hi folks, I would be really thankfull if someone has a script that hides and show an array of div's.

I need that to show stores in some regions, and some stores are in many regions if not all regions, so i want to filter out stores that are in a chosen region.

if i select number 2 in the drop down, i would see "blah 2" and "blah 3" and so on... Can anyone help?

Here is the code:

&lt;html&gt;
&lt;head&gt;
&lt;script type="text/javascript"&gt; 
function ShowMeWhatIWant(chosen){ 
	if (chosen = 1) {
	// show div 1
	// hide div 2 and 3
	}
	elseif (chosen = 2) {
	//show div 2 and 3
	// hide div 1
	}
	elseif (chosen = 3) {
	//show div 1 and 3
	// hide div 2
	}
	else {
	//show all div's
	}
} 
&lt;/script&gt; 
&lt;/head&gt;
&lt;body&gt;


&lt;select onChange="java script:ShowMeWhatIWant(this)"&gt; 
	&lt;option value="1"&gt;1&lt;/option&gt; 
	&lt;option value="2"&gt;2&lt;/option&gt; 
	&lt;option value="3"&gt;3&lt;/option&gt; 
&lt;/select&gt; 


&lt;div id="first"&gt;blah&lt;/div&gt;
&lt;div id="second"&gt;blah&lt;/div&gt;
&lt;div id="third"&gt;blah&lt;/div&gt;


&lt;/body&gt;
&lt;/html&gt;

Edited March 6, 2008 by WAR-DOG

1,062 · March 6, 2008

Any javascript guru out there? :blink:

March 6, 2008

&lt;script type="text/javascript"&gt;
function ShowMeWhatIWant(chosen){
	var first = document.getElementById('first');
	var second = document.getElementById('second');
	var third = document.getElementById('third');

	first.style.display = 'block';
	second.style.display = 'block';
	third.style.display = 'block';
	if (chosen == 1) {
		second.style.display = 'none';
		third.style.display = 'none';
	}elseif(chosen == 2){
		first.style.display = 'none';
	}elseif(chosen == 3){
		second.style.display = 'none';
	}
}
&lt;/script&gt;

Should help.

1,062 · March 7, 2008

A! nice... but it doesn't work when i try it. I also modified it a little :

&lt;script type="text/javascript"&gt; 
function ShowMeWhatIWant(chosen){
	var first = document.getElementById('first');
	var second = document.getElementById('second');
	var third = document.getElementById('third');

	if (chosen == 1) {
		first.style.visibility = 'visible'
		second.style.visibility = 'hidden';
		third.style.visibility = 'hidden';
	} else if (chosen == 2){
		first.style.visibility = 'hidden';
		second.style.visibility  = 'visible'
		third.style.visibility  = 'visible'
	} else if (chosen == 3){
		first.style.visibility  = 'visible'
		second.style.visibility = 'hidden';
		third.style.visibility  = 'visible'
	} else {
		first.style.visibility  = 'visible'
		second.style.visibility  = 'visible'
		third.style.visibility  = 'visible'
	}
}
&lt;/script&gt;

11,570 · March 7, 2008

Add alert(chosen); to the top of the function and see what the value is. If it matches what you have in the conditionals, then you likely need to execute parseInt() on chosen or put 1, 2, and 3 in quotes since, IIRC, it's being treated as a string, not an integer.

1,062 · March 7, 2008

The alert() did really help me figure out my problem. So I took the time to search google and learned about javascript+select :)

So here is my solution:

&lt;html&gt;
&lt;head&gt;
&lt;script type="text/javascript"&gt; 
function ShowMeWhatIWant(){
	var chosen = document.TheForm.TheList.options[document.TheForm.TheList.selectedIndex].value
	var first = document.getElementById('first');
	var second = document.getElementById('second');
	var third = document.getElementById('third');
	if (chosen == '1') {
		first.style.display = 'block'
		second.style.display = 'none'
		third.style.display = 'none'
	} else if (chosen == '2'){
		first.style.display = 'none'
		second.style.display = 'block'
		third.style.display = 'block'
	} else if (chosen == '3'){
		first.style.display = 'block'
		second.style.display = 'none'
		third.style.display = 'block'
	} else {
		first.style.display = 'block'
		second.style.display = 'block'
		third.style.display = 'block'
	}
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;form name="TheForm"&gt;
&lt;select name="TheList" onChange="java script:ShowMeWhatIWant()"&gt; 
	&lt;option&gt;none&lt;/option&gt; 
	&lt;option value="1"&gt;1&lt;/option&gt; 
	&lt;option value="2"&gt;2&lt;/option&gt; 
	&lt;option value="3"&gt;3&lt;/option&gt; 
&lt;/select&gt; 
&lt;/form&gt;

&lt;div id="first"&gt;blah 1&lt;/div&gt;
&lt;div id="second"&gt;blah 2&lt;/div&gt;
&lt;div id="third"&gt;blah 3&lt;/div&gt;


&lt;/body&gt;
&lt;/html&gt;

Thank you all for helping!

March 7, 2008

Two words: Use jQuery!

1,062 · March 7, 2008

Now that you mentioned, I looked up the jQuery page.

Found what I need: http://docs.jquery.com/Tutorials:How_to_Ge...ything_You_Want

The only negative thing here is that, you have to include a "large" .js file to your page (jquery-1.2.3.min.js = 53kb)

1,062 · March 7, 2008

I found a flaw in the code, it only changes the first div's with the same name, because ID's are intended to be unique, unfortunatly there is no getElementByClass...

11,570 · March 7, 2008

Can you elaborate?

March 7, 2008

I found a flaw in the code, it only changes the first div's with the same name, because ID's are intended to be unique, unfortunatly there is no getElementByClass...

http://mootools.net/ is much smaller then jquery and much more flashy and responsive if you ask me...

also you could just do somthing easy like this....

function show(){

var MYobjects =["divID1","divIDa","divIDsomthing"];

for(item in MYobjects){

document.getElementById(item).styles.visibility = visible.

}

In moo tools you could even reduce it further to somthing like this

function show(){

$('MainDiv').getElements('div[id$=toggleDIV]').each(function(div){

//get all div tags with id ending with 'toggleDIV' inside the Div MainDiv

div.setStyle('visibility', 'visible');

//Sets them all to visible

});

}

function hide(){

$('MainDiv').getElements('div[id$=toggleDIV]').each(function(div){

//get all div tags with id ending with 'toggleDIV' inside the Div MainDiv

div.setStyle('visibility', 'none');

//Sets them all to invisible

});

}

EDIT:::

for a real quick loop if you wanted all items with a certain style you could use $$ in mootools eg

$$('toggleDiv').each(function(div){

//get all elements with css selector = 'toggleDIV' in the DOM

div.setStyle('visibility', 'none');

//Sets them all to invisible

});

Edited March 7, 2008 by 72001

1,062 · March 7, 2008

Ok, i have a small solution for the problem :)

&lt;script type="text/javascript"&gt;
function ShowMe(picked){

	var area = document.getElementById("areaofeffect");
	var divs = area.getElementsByTagName("div");
	var goes = divs.length;

	if(picked=='0'){for(i=0; i&lt;goes; i++){divs[i].style.display="block";} return false}
	for(i=0; i&lt;goes; i++){
		if(divs[i].className!="p"+picked){
			divs[i].style.display="none";
		}
		else{
			divs[i].style.display="block";
		}
	}

} 

&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;form&gt;
&lt;label&gt;Choose Region&lt;/label&gt;
&lt;select onChange="ShowMe(this.value)"&gt; 
	&lt;option value="0" selected&gt;none&lt;/option&gt; 
	&lt;option value="1"&gt;Region 1&lt;/option&gt; 
	&lt;option value="2"&gt;Region 2&lt;/option&gt; 
	&lt;option value="3"&gt;Region 3&lt;/option&gt; 
	&lt;option value="4"&gt;Region 4&lt;/option&gt; 
&lt;/select&gt; 
&lt;/form&gt;

&lt;div class="test"&gt;control subject&lt;/div&gt;
&lt;div id="tester"&gt;control subject1&lt;/div&gt;

&lt;div id="areaofeffect"&gt;
	&lt;div class="p1"&gt;Partner 1 Region 1&lt;/div&gt;
	&lt;div class="p2"&gt;Partner 2 Region 2&lt;/div&gt;
	&lt;div class="p1"&gt;Partner 3 Region 1&lt;/div&gt;
	&lt;div class="p3"&gt;Partner 4 Region 3&lt;/div&gt;
	&lt;div class="p4"&gt;Partner 5 Region 4&lt;/div&gt;
	&lt;div class="p1"&gt;Partner 6 Region 1&lt;/div&gt;
	&lt;div class="p2"&gt;Partner 7 Region 2&lt;/div&gt;
	&lt;div class="p3"&gt;Partner 8 Region 3&lt;/div&gt;
&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;

March 8, 2008

thanks for the code war-dog.

Was after something like this for part of my personal site, being trying for days to work something out and your solution works perfectly :D

1,062 · March 10, 2008

Since one partner can be represented in many regions, if not all I improved the code:

&lt;script type="text/javascript"&gt;
function trim(str, charlist) {
	charlist = !charlist ? ' \s\xA0' : charlist.replace(/([\[\]\(\)\.\?\/\*\{\}\+\$\^\:])/g, '\$1');
	var re = new RegExp('^[' + charlist + ']+|[' + charlist + ']+$', 'g');
	return str.replace(re, '');
}

function explode( delimiter, string ) {
	var emptyArray = { 0: '' };
	if ( arguments.length != 2 || typeof arguments[0] == 'undefined' || typeof arguments[1] == 'undefined' ) {
		return null;
	}

	if ( delimiter === '' || delimiter === false || delimiter === null ) {
		return false;
	}

	if ( typeof delimiter == 'function' || typeof delimiter == 'object' || typeof string == 'function' || typeof string == 'object' ) {
		return emptyArray;
	}

	if ( delimiter === true ) {
		delimiter = '1';
	}

	return string.toString().split ( delimiter.toString() );
}

function ShowMeWhatINeed(picked){

	var area = document.getElementById("areaofeffect");
	var divs = area.getElementsByTagName("div");
	var goes = divs.length;
	var tmp  = [];
	var ingoes;
	var chk;

	if(picked=='0') { for(i=0; i&lt;goes; i++) { divs[i].style.display="block";} return false }

	for(i=0; i&lt;goes; i++) {
		tmp=explode(" ", divs[i].className);
		ingoes=tmp.length;
		for(j=0; j&lt;ingoes; j++){
			if(trim(tmp[j])!="p"+picked) {
				divs[i].style.display="none";
			}
			else {
				divs[i].style.display="block";
				break;
			}
		}
	}
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;form&gt;
&lt;label&gt;Choose Region&lt;/label&gt;
&lt;select onChange="ShowMeWhatINeed(this.value)"&gt; 
	&lt;option value="0" selected&gt;none&lt;/option&gt; 
	&lt;option value="1"&gt;Region 1&lt;/option&gt; 
	&lt;option value="2"&gt;Region 2&lt;/option&gt; 
	&lt;option value="3"&gt;Region 3&lt;/option&gt; 
	&lt;option value="4"&gt;Region 4&lt;/option&gt; 
&lt;/select&gt; 
&lt;/form&gt;

&lt;div class="test"&gt;control subject&lt;/div&gt;
&lt;div id="tester"&gt;control subject1&lt;/div&gt;

&lt;div id="areaofeffect"&gt;
	&lt;div class="p1 p2"&gt;Partner 1 Region 1,2&lt;/div&gt;
	&lt;div class="p2"&gt;Partner 2 Region 2&lt;/div&gt;
	&lt;div class="p1 p3"&gt;Partner 3 Region 1,3&lt;/div&gt;
	&lt;div class="p3"&gt;Partner 4 Region 3&lt;/div&gt;
	&lt;div class="p4"&gt;Partner 5 Region 4&lt;/div&gt;
	&lt;div class="p1"&gt;Partner 6 Region 1&lt;/div&gt;
	&lt;div class="p2"&gt;Partner 7 Region 2&lt;/div&gt;
	&lt;div class="p3"&gt;Partner 8 Region 3&lt;/div&gt;
&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;

Sign In

[JavaScript] hide show an array od div's

Question

WAR-DOG

Link to comment

Share on other sites

13 answers to this question

Recommended Posts

WAR-DOG

Link to comment

Share on other sites

Twisted Chaz

Link to comment

Share on other sites

WAR-DOG

Link to comment

Share on other sites

Mathachew Veteran

Link to comment

Share on other sites

WAR-DOG

Link to comment

Share on other sites

aludanyi

Link to comment

Share on other sites

WAR-DOG

Link to comment

Share on other sites

WAR-DOG

Link to comment

Share on other sites

Mathachew Veteran

Link to comment

Share on other sites

72001

Link to comment

Share on other sites

WAR-DOG

Link to comment

Share on other sites

D.J.P

Link to comment

Share on other sites

WAR-DOG

Link to comment

Share on other sites

Recently Browsing 0 members