Hide elements of the same type

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
Da_Elf
Forum Commoner
Posts: 81
Joined: Mon Dec 29, 2008 12:31 pm

Hide elements of the same type

Post by Da_Elf »

With javascript code not jquery
ive got a bunch of images. some are typea some typeb some typec. i want that when i click filter options i can hide some of the types. i know how to do this with php with a page refresh but i want it to look fancier than a page refresh

the javascript would be (this is super basic right now i can flesh it out once i have the theory)

Code: Select all

function filterGal(galEl){
	document.getElementById(galEl).style.visibility='hidden';
}
in the html i will have

Code: Select all

<div style="display:inline-block; cursor:pointer" onclick="filterGal('a')">ItemA</div>
<div style="display:inline-block; cursor:pointer" onclick="filterGal('b')">ItemB</div>
<div style="display:inline-block; cursor:pointer" onclick="filterGal('c')">ItemC</div>
<img src="1.jpg" style="float:left; margin:20px;" width="100" id="a" /> 
<img src="2.jpg" style="float:left; margin:20px;" width="100" id="c" /> 
<img src="3.jpg" style="float:left; margin:20px;" width="100" id="c" /> 
<img src="4.jpg" style="float:left; margin:20px;" width="100" id="a" /> 
<img src="5.jpg" style="float:left; margin:20px;" width="100" id="b" /> 
<img src="6.jpg" style="float:left; margin:20px;" width="100" id="a" /> 
now i know you cant have multiple id's the same so what am i left with for the javascript to pick up on? are you allowed to have multiple names as the same? i tried document.getElementByName(galEl).style.visibility='hidden'; but that didnt work

note. i tried some code from w3schools like this

Code: Select all

var x=document.getElementsByName("x");
alert(x.length);
and it returned the correct number. but when i tried to use name and get it to hide the elements. poof. functionality gone
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Hide elements of the same type

Post by Celauran »

Use a class instead of an ID?

Code: Select all

document.getElementByClassName('foo')
Da_Elf
Forum Commoner
Posts: 81
Joined: Mon Dec 29, 2008 12:31 pm

Re: Hide elements of the same type

Post by Da_Elf »

nope. that doesnt work
Da_Elf
Forum Commoner
Posts: 81
Joined: Mon Dec 29, 2008 12:31 pm

Re: Hide elements of the same type

Post by Da_Elf »

ok i figured out that i needed to set the names up with name="a[]"
then use this java code
function filterGal(galEl){
var xeno=document.getElementsByName(galEl);
for (i = 0; i < xeno.length; i++){
xeno.style.display= 'none' ;
}
}
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Hide elements of the same type

Post by Celauran »

Whoops. Typo. getElementsByClassName(). My bad.

Code: Select all

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf8">
		<style>
		div.a,
		div.b,
		div.c {
			height: 50px;
			width: 50px;
			float: left;
			margin-right: 10px;
		}
		div.a {
			background-color: red;
		}
		div.b {
			background-color: blue;
		}
		div.c {
			background-color: green;
		}
		</style>
		<script>
		function filterGal(foo) {
			var toHide = document.getElementsByClassName(foo);
			for (i = 0; i < toHide.length; i++) {
				toHide[i].style.display = 'none';
			}
		}
		</script>
	</head>
	<body>
		<div onclick="filterGal('a')">ItemA</div>
		<div onclick="filterGal('b')">ItemB</div>
		<div onclick="filterGal('c')">ItemC</div>
		<div class="a">A</div>
		<div class="c">C</div>
		<div class="c">C</div>
		<div class="a">A</div>
		<div class="b">B</div>
		<div class="a">A</div>
	</body>
</html>
Da_Elf
Forum Commoner
Posts: 81
Joined: Mon Dec 29, 2008 12:31 pm

Re: Hide elements of the same type

Post by Da_Elf »

thanks for the clarification :) had picked up on the missing -s- :) i went with name[] since when i was reading online ClassName isnt supported IE <9
Post Reply