JavaScript Show/Hide as Filters to list of divs
Posted
by
deconspray
on Stack Overflow
See other posts from Stack Overflow
or by deconspray
Published on 2011-02-16T14:45:50Z
Indexed on
2011/02/16
15:25 UTC
Read the original article
Hit count: 162
Looking to create Javascript that acts like a filter on a list of divs. For instance, here's the intended markup...
<a href="#" onclick="">Filter Item 1</a>
<a href="#" onclick="">Filter Item 2</a>
<a href="#" onclick="">Filter Item 3</a>
<a href="#" onclick="">Filter Item 4</a>
<a href="#" onclick="">Filter Item 5</a>
<div class="1">Item 1</div>
<div class="1">Item 1</div>
<div class="2">Item 2</div>
<div class="3">Item 3</div>
<div class="1">Item 1</div>
<div class="4">Item 4</div>
<div class="4">Item 4</div>
<div class="1">Item 1</div>
<div class="5">Item 5</div>
I want to be able to click on the link for Item 1, and show only Item 1 divs and hide all other divs, click the link of Item 2, and show only Item 2 divs and hide all other divs and so on. I've seen several similar scripts but nothing that seemingly turns divs matching the class on/off in this manner.
TIA.
© Stack Overflow or respective owner