JavaScript Show/Hide as Filters to list of divs

Question

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.

Answer 1

This can be done easily in Jquery, following should work for you, but you have to modify your html as following

<a href="#" class="link" id="1">Filter Item 1</a>
<a href="#" class="link" id="2">Filter Item 2</a>
<a href="#" class="link" id="3">Filter Item 3</a>
<a href="#" class="link" id="4">Filter Item 4</a>
<a href="#" class="link" id="5">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>

and javascript as follows

$(document).ready(function(){
 $(".link").click(function(e){
  $("." + e.currentTarget.id).toggle()
 }
});

Answer 2

You can use jQuery's toggle. below is simple example:

    $(document).ready(function() {
        $('#IDOfLink').click(function() {
            $('.class1').toggle("slow");//switch to show/hide when clicked
            //hide other div u wish
        });

        $('#anotherLinkID').click(function() {
            $('.class2').toggle("fast");//switch to show/hide when clicked
            //hide other div u wish
        });
        //...etc...
    });

Answer 3

Very simple solution:

<a href="#" onclick="$('DIV').hide(); $('DIV.1').show(); return false;">Filter Item 1</a>

This, ofcourse, will hide all the other div's on page, so you should give the all some other class or put inside another div. Then the code could be:

<a href="#" onclick="$('#filtered DIV').hide(); $('#filtered DIV.1').show(); return false;">Filter Item 1</a>

<div id="filtered">
    <div class="1"></div>
    ...
</div>

Answer 4

Set an ID for each link, then assign an onclick event. There you can filter out divs using the clicked link ID.

Something like this (http://jsfiddle.net/pJRek/1/)

Markup:

<a href="#" class="bound" id="group_1">Filter Item 1</a>
<a href="#" class="bound" id="group_2">Filter Item 2</a>
<a href="#" class="bound" id="group_3">Filter Item 3</a>
<a href="#" class="bound" id="group_4">Filter Item 4</a>
<a href="#" class="bound" id="group_5">Filter Item 5</a>

<div class="group_1">Item 1</div>
<div class="group_1">Item 1</div>
<div class="group_2">Item 2</div>
<div class="group_3">Item 3</div>
<div class="group_1">Item 1</div>
<div class="group_4">Item 4</div>
<div class="group_4">Item 4</div>
<div class="group_1">Item 1</div>
<div class="group_5">Item 5</div>

And script:

$(document).ready(function(){
    var links = $('.bound');
    var divs = $('div');
    links.click(function(event){
       divs.hide();
       divs.filter('.' + event.target.id).show();
    });
});

Answer 5

If you setup your HTML as:

<div id="controls">    
  <a href="#" id="1">Filter Item 1</a>
  <a href="#" id="2">Filter Item 2</a>
  <a href="#" id="3">Filter Item 3</a>
  <a href="#" id="4">Filter Item 4</a>
  <a href="#" id="5">Filter Item 5</a>
</div>
<div id="items">
  <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>
</div>

Then your jQuery code can be as simple as:

$(function(){
    $("#controls a").click(function() {
        $("#items").find("." + this.id).toggle();   
    });
  });

Of course, you will want to add a visual indication that a filter is toggled on and off. You may not want to associate the items with each link through id/classes, but instead use jQuery's data storage, depending on your needs.

A working example, tested in firefox, here: http://jsfiddle.net/mwolfetech/GetRV/

Edit: This solution is similar to Anto Binish Kaspar's, mainly differing only in how the html is modified. I think that the divs given are likely to be a good structure for your document anyway, and eliminates the need for extra classes for control. This is always a design decision--balancing div (for structural division) vs class (for, categories). Additionally, theres no need to extract the id from the event object as jQuery provides the this reference.

Answer 6

Give them all another class (for example item) and then make the click hide all item and show all of the selected value.