Erweitern Sie Kollapsausgaben

Question

Ich versuche, font super '+' Symbol zu '-' Symbol zu ändern, wenn die Liste erweitert wird, könnte mir jemand helfen.

jQuery:

var $ul = $('ul'); 
$ul.find('li[Catparent-id]').each(function() { 
    $ul.find('li[Catparent-id=' + $(this).attr('Catli-id') + ']').wrapAll('<ul />').parent().appendTo(this) 
}); 

var $expandBtns = $('.expandBtn'); 
var $span; 

//counting childs 

$expandBtns.each(function() { 
    $span = $(this).find('span#count'); 
    var $subList = $(this).siblings('ul').find('li') 
    if ($subList.length > 0) { 
    $span.append(' ' + $subList.length); 
    } else { 
    $span.css('display', 'none'); 
    } 
}); 

//Collapse and Expand 
$('#orgCat ul').hide('li'); 
$expandBtns.on('click', function() { 
    var $subList = $(this).siblings('ul'); 
    $(this).parent('li').siblings('li').find('ul').hide('slow'); 
    if ($subList.is(':visible')) { 
    $subList.hide('slow'); 
    } else { 
    $subList.show('slow'); 
    } 
}); 

Für HTML und CSS JSFIDDLE

Answer 1

Dies ist, was Sie

var plusClass = "fa-plus-circle"; 
var minusClass = "fa-minus-circle"; 
//Collapse and Expand 
$('#orgCat ul').hide('li'); 
$expandBtns.on('click', function() { 
    var $subList = $(this).siblings('ul'); 
    $(this).parent('li').siblings('li').find('ul').hide('slow');  
    //reset icons since you close other children 
    $(this).parent('li').siblings('li').find('i'). 
     removeClass(minusClass).addClass(plusClass); 
    if ($subList.is(':visible')) { 
     $subList.hide('slow'); 
     $(this).find("i:first").addClass(plusClass).removeClass(minusClass); 
     $(this).removeClass("blue"); 
    } else { 
     $subList.show('slow'); 
     $(this).find("i:first").removeClass(plusClass).addClass(minusClass); 
     $(this).addClass("blue"); 
    } 
}); 

Fiddle ==>https://jsfiddle.net/8aaq0j4c/2/

Fiddle mit Farbwechsel benötigen ==>https://jsfiddle.net/8aaq0j4c/3/