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.
source to share
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;
}
source to share
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.
source to share