CODEWITHSUNDEEP
jquerylistdynamichtml
Jacksgrin
Jacksgrin

Reputation: 85

jQuery list icon change

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.

Upvotes: 3

Views: 1159

Answers (2)

Plynx
Plynx

Reputation: 11461

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/

Upvotes: 1

jholloman
jholloman

Reputation: 1979

You're adjusting the liststyle for the entire list which contains both secondary items. You need to change the class at the li level instead of the ul level.

  $('.handle').click(function(){
    var $this = $(this);
    $this.siblings().slideToggle('slow');
    $this.closest('li').toggleClass('expanded');
    $this.closest('li').toggleClass('collapsed');
                               });  
                             });

This isn't a perfect fix but shows a somewhat working version. I just changed the ul to li and updated the html.

http://jsfiddle.net/Gwbfd/5/

Upvotes: 0

Related Questions