jQuery IE7 - Click only registers to first element in path

Question

$('div#Categories > div.categories  a#showhide').click(function(){
        // Get the subManufacturers list
        var subCatList = $(this).parent().find('ul#hiddenSubCategories');

        // If collapsed do expand
        if (subCatList.css('display') == 'none')
        {
            subCatList.slideDown('slow');
            $(this).find('span').html('Hide');
        }
        else 
         {
            subCatList.slideUp('slow');
            $(this).find('span').html('View All');
        }

        // Stop link from doing anything
        return false;
    });

The above code works perfectly in IE8, Firefox and Chrome (haven't tested in Opera) but only registers the click function with the first matching element and not all that match it. Is this a known bug or something unique to this site and hence an issue elsewhere.

Answer 1

You have a#showhide in the selector. Since IDs have to be unique, this will only match one element.

You probably want to use class="showhide" and a.showhide instead.

Answer 2

$('div#Categories > div.categories a#showhide')

If your 'a' element has an id, it should be unique within the page. ie, there shouldn't be more than one element with the id 'showhide' on the page.

This is probably what's messing with IE. Try changing the id to a class name.