Changing jQuery list icon
I have a dropdown and some code to do an operation to cut out the children and also change the list icon: Full customization of this script: 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 multilevel and the problem I am facing is multiple second level children and when I click on one of the second level children it changes the icons of both children.
You need to style your elements with style li
, and this includes 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 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/
You are setting up the liststyle for the entire list that contains both additional elements. You need to change the class at li level instead of ul level.
$('.handle').click(function(){
var $this = $(this);
$this.siblings().slideToggle('slow');
$this.closest('li').toggleClass('expanded');
$this.closest('li').toggleClass('collapsed');
});
});
This is not a perfect solution, but shows a somewhat working version. I just changed the ul to li and updated the html.
http://jsfiddle.net/Gwbfd/5/