Home/ Questions/Q 9080705
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T20:08:06+00:00

I’m using show/hide to reveal groups of items based on their class attributes. How

  • 0

I’m using show/hide to reveal groups of items based on their class attributes. How can I filter those groups of items even further, so that the second results set from clicking in column B is a subset of the first results set. Based on my reading I’m thinking filter or sibling might hold the key but so far my experiments have failed.

Here I’m updating with a bit more explanation of the desired functionality:
Click an item in the first list to reveal a subset of that list.
Click an item in the second list to refine the previous subset.
E.g., in column 1, click red to see only red items.
Then In column 2, click large to see only large red items. While still in column 2, click small to see only small red items. It should be possible to filter this way until clicking back into column one which should reveal a new subset of that list.

http://jsfiddle.net/TorontoDave/Ph98L/

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>

    <head>

    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />

    <style>
        * {font-family:arial}
        .item div {height:50px; width:50px; color:white; font-weight:bold; float:left; margin:1px; text-align:center}
        .nav {float:left}
         li {float:left; list-style:none; padding-right:30px}
        .item .small {font-size:1em}
        .item .medium {font-size:2em}
        .item .large {font-size:3em}
        .item .red {background:red}
        .item .green {background:green}
        .item .blue {background:blue}
        .item .orange {background:orange}
        .item .purple {background:purple}
    </style>

    <script src="../js/jquery-1.5.2.min.js"></script>

    </head>

    <body>
    <h1>Problem: adjust my jQuery code to get column B to filter on column A?</h1>
    <div class="nav">
    <p>Column A<br>Filter by:</p>
    <ul>
    <li id="A">A</li>
    <li id="red">red</li>
    <li id="green">green</li>
    <li id="large">large</li>
    <li id="small">small</li>
    <li id="B">B</li>
    <li id="orange">orange</li>
    </ul>
    </div>

    <div class="nav">
    <p>Column B<br>Then by:</p>
    <ul>
    <li id="A">A</li>
    <li id="red">red</li>
    <li id="green">green</li>
    <li id="large">large</li>
    <li id="small">small</li>
    <li id="B">B</li>
    <li id="orange">orange</li>
    </ul>
    </div>

    <div class="item">
    <div class="small red A">A</div>
    <div class="small green A">A</div>
    <div class="small orange A">A</div>
    <div class="small purple A">A</div>
    <div class="small blue A">A</div>
    <div class="medium red A">A</div>
    <div class="medium green A">A</div>
    <div class="medium orange A">A</div>
    <div class="medium purple A">A</div>
    <div class="medium blue A">A</div>
    <div class="large red A">A</div>
    <div class="large green A">A</div>
    <div class="large orange A">A</div>
    <div class="large purple A">A</div>
    <div class="large blue A">A</div>
    <div class="small red B">B</div>
    <div class="small green B">B</div>
    <div class="small orange B">B</div>
    <div class="small purple B">B</div>
    <div class="small blue B">B</div>
    <div class="medium red B">B</div>
    <div class="medium green B">B</div>
    <div class="medium orange B">B</div>
    <div class="medium purple B">B</div>
    <div class="medium blue B">B</div>
    <div class="large red B">B</div>
    <div class="large green B">B</div>
    <div class="large orange B">B</div>
    <div class="large purple B">B</div>
    <div class="large blue B">B</div>
    <div class="small red C">C</div>
    <div class="small green C">C</div>
    <div class="small orange C">C</div>
    <div class="small purple C">C</div>
    <div class="small blue C">C</div>
    <div class="medium red C">C</div>
    <div class="medium green C">C</div>
    <div class="medium orange C">C</div>
    <div class="medium purple C">C</div>
    <div class="medium blue C">C</div>
    <div class="large red C">C</div>
    <div class="large green C">C</div>
    <div class="large orange C">C</div>
    <div class="large purple C">C</div>
    <div class="large blue C">C</div>
    </div><!-- //end items -->  


        <script><!-- to show and hide overlays -->
        $(document).ready(function(){
            $('li').click(function(){
                $('.item div').hide();
                $('.'+this.id).show('slow');
            });
        });
    </script>


    </body>
    </html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This fiddle will work

    $('li').click(function() {
  var divs = $('item div:visible').add('.' + this.id + ':visible');
  $('.item div').hide();
  divs.show('slow');
});

    I would suggest using a closure, in this fiddle, so you do not need to re-select the div‘s on every click. Unless they are dynamic.

    $(document).ready(function() {
  var squares = $('.item div');
  $('li').click(function() {
    var divs = $(':visible', squares).add('.' + this.id + ':visible');
    squares.hide();
    divs.show('slow');
  });
});​

    Per the OP’s edit:

    This fiddle will work.

    $(document).ready(function() {
  var squares = $('.item div');
  var filters = $('.nav').data('filter', null);
  $('li').click(function(){
    $(this).closest('.nav').data('filter', '.' + this.id);
    var f = filters.map(function(){ return $(this).data('filter'); }).toArray();
    squares.hide().filter(f.join('')).show('slow');
  });
});​

    Note: The way the code is written, you should be able to add n additional filters.

    • 0