Question

I have a select menu that shows or hides list items depending on ID. Except my list has multiple LI’s with the same ID value.

This only shows the first LI in the list with the matching ID value.

$(function() {
    $("#orientation").change(function() {
        if (this.value == 'all') {
            $("#images").children().show();
        }
        else {
            $("#" + this.value).show().siblings().hide();
        }
    });
    $("#orientation").change();
});​

http://jsfiddle.net/dRqRV/

How can I show all sibling LI’s with the same ID value?

Answer 1

IDs must be unique, jQuery only selects the first element with a specific ID, you can change ID to classes and code:

$(function() {
    var $li = $('#images').find('li')
    $("#orientation").change(function() {
        if (this.value == 'all') $li.show();
        else $li.hide().filter("." + this.value).show();
    }).change();
});

http://jsfiddle.net/Z3Qgz/