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';
}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" /> note. i tried some code from w3schools like this
Code: Select all
var x=document.getElementsByName("x");
alert(x.length);