Thread

Not strictly an ExpressionEngine query, but I have faith in this community.

Here’s a show-hide puzzler from a JQuery newbie:

I want to do some show-hide magic on an unordered list with hundreds of <li> elements.

If I apply the same class to the trigger elements and the target elements, what JQuery code will enable a click on a trigger with a certain class to show the list elements with the same class, and hide all others?

That is to say, if I have a trigger with class “foo”, what JQuery code will match and show-hide target elements also of class “foo”?

Sorry if I’m using the wrong terminology. This is new. And powerful!

$(function(){
    $('.foo').click(function(e){
        e.preventDefault();
        $('.foo').not(this).toggle();
    });
});

Edit: Oops, you want to hide all other elements, I misread. Without having a list of classes that you want to show/hide, or at least some parent element/class to act within, this is a bit tough.

$(function(){
    $('.foo').click(function(e){
        e.preventDefault();
        $('*').not(this).toggle();
    });
});

The above could would toggle every single visible element, except that which you clicked. This isn’t ideal, clearly. If all of your target elements were in some sort of container (e.g., a list), and all of your trigger elements were also in a container, e.g., a different list you could do the following:

$(function(){
    $('.triggerList a').click(function(e){
        e.preventDefault();
        $('.targetList li:visible').hide();
        $('.targetList .' + $(this).attr('class')).show();
    });
});

Example source:

<ul class="triggerList">
    <li><a href="#" class="a">A</a></li>
    <li><a href="#" class="b">B</a></li>
    <li><a href="#" class="c">C</a></li>
</ul>
<ul class="targetList">
    <li class="a">A</li>
    <li class="b">B</li>
    <li class="c">C</li>
</ul>

Daniel, thanks for your reply. You have correctly inferred that I’m using lists as the container for the trigger and the target. Should have stated so at the outset, but I’m new to this.

Your code works a treat!

My next iteration will be to see if I can’t toggle cumulatively in an on-off method for the trigger list. That is to say, the trigger list may have classes a, b, and c, and the user could toggle on/off a, b, or c as if they were buttons—i.e., show/hide list items in the target list where the list items have class a + b, or a + c, or a + b + c.

If you guessed that I’m building an employee directory, you get a prize. I’m aiming for triggers on selectors like title/role, department, and alphabetical sort. The ideal outcome will be an ability to toggle sorts for, say, all employees whose name starts with “C” and who are in the Finance department.

Any ideas for that?

Seems like you might be trying too hard. There are plugins (jQuery ones) that do what you describe, for example tableSorter. I’m almost positive there are probably more versatile data “grid” plugins, too.

definitely trying too hard for an employee directory.  a search box and navigation to the different departments would seem sufficient.  tablesorter is another good one, as Daniel mentioned, but it cause more problems than it solves if the data shouldn’t be presented as a table in the first place.