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

Filed under:
|
|
|

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

Related posts about JavaScript

Related posts about jQuery