Kirill Nagiev Kirill Nagiev - 1 month ago 8
CSS Question

Change color of parent item in accordion

So I have an accordion, and I need to change the color of the item being dropped inside the accordion, not inside dropped area. Here what I have so far jsfiddle

$("#myAccordion li").draggable({
appendTo: "body",
helper: "clone",
refreshPositions: true,
start: function (event, ui) {
//var name = $(this).closest('.item');
sourceElement = $(this);
},
});


So i'm setting source element and then changing css of it:

sourceElement.css('color','red');


And then I want to make it black again after removing item:

$(".projLeader").on('click', '.closer', function(){
var item = $(this).closest('.item');
itm.splice(item);
sourceElement.css('color','black');
item.fadeTo(200, 0, function(){ item.remove(); })
});


So I have several issues. First is color changes for both accordion and droppable area, Second after removing item color is not changing back for item user deleted, instead it changes color for last dropped item. Any help please? Thanks

Answer

Please change following code

$(".projLeader").on('click', '.closer', function(){
        var item = $(this).closest('.item');
        var element = $("#myAccordion ul li").filter(function() {
                return $(this).text() == item.text(); 
        });
        itm.splice(item);
        element.css('color','black');
        item.fadeTo(200, 0, function(){ item.remove(); })
});

Updated Fiddle