Question

I have a drop down list and some code to perform the operation to drop down the children and also change the list icon: Full set-up on this fiddle : http://jsfiddle.net/Gwbfd/3/

$(document).ready(function(){
 $('.drawer').hide();
  $('.handle').click(function(){
    $(this).siblings().slideToggle('slow');
    $(this).closest('ul').toggleClass('expanded');
    $(this).closest('ul').toggleClass('collapsed');
                               });  
                             });

The list is multi-tiered, and the problem I am having is there are multiple children of the second tier, and when I click one of the second tier children, it changes the icons of both children.

Answer 1

You need to style the li elements directly, and that involves a few modifications to your code:

$(document).ready(function(){
   $('.drawer').hide();
   $('li:has(ul)').addClass("collapsed");
   $('.handle').click(function(){
      $(this).siblings().slideToggle('slow');
      $(this).closest('li').toggleClass('expanded');
      $(this).closest('li').toggleClass('collapsed');
  });
});

and in the CSS:

li.expanded{
list-style: outside url('http://www.theparisreview.org/images/expand-icon.png') none;
    margin-left: 30px;
}

li.collapsed{
    list-style: outside url('http://www.theparisreview.org/images/collapse-icon.png') none;
    margin-left: 30px;
}

Demo: http://jsfiddle.net/Gwbfd/8/