Question

There are several advanced jQuery plugins which filter <div>s by corresponding id or class. This is indeed based on a simple jQuery idea, but I am not sure how to implement it. Consider a menu to show/hide the content as

<ul id="filters" class="menu" indicator="filter">
 <li><a href="#filter" indicator="*" class="selected">All</a></li>
 <li><a href="#filter" indicator=".first">First</a></li>
 <li><a href="#filter" indicator=".third">Third</a></li>
</ul>

and we want to control the display of contents:

<div class="box first">Something</div>
<div class="box first third">Something</div>
<div class="box third">Something</div>

What is the simplest jQuery Javascript code to do so?

By default, all <div>s are shown, when we click on a <li> from menu (e.g. FIRST), jQuery will filter the <div>s to only show <div>s in which the class is “first”.

Answer 1

Don’t use attribute “indicator” as it doesn’t exist. Use the class element as below. Also the A elements are not needed.

<ul id="filters" class="menu">
 <li class="selected all">All</li>
 <li class="first">First</li>
 <li class="third">Third</li>
</ul>

Then your script

// hide all divs 
$('div.box').css('display','hidden');

// add click handler on control list
$('ul#filters li').click(function() {

   var classList =$(this).attr('class').split(/\s+/);
    $.each( classList, function(index, item){
        if (item != 'selected') {
           $('div.'+item).css('display','block');
        }
    });

});