[Anton Essential]

Добрый вечер дорогие друзья , пишу вам с очередной просьбой , помочь мне, разобраться с многоуровневым аккордеоном

<div class='some-class'>
    <ul id='accordion'>
        <li>
        <p>Нажмите тут</p>
        <span class='plus'></span>
        <span class='minus'></span>
            <ul class='sub-menu'>
                <li>
                <p>Нажмите тут</p>
                <span class='plus'></span>
                <span class='minus'></span>
                    <ul class='sub-menu-2'>
                        <li></li>
                    <ul>
                </li>
            </ul>   
        </li>
    </ul>
</div>

так же у меня в хтмл разметке присутствуют спаны, один с плюсиком , второй с минусом , и имееться класс эктив с другим цветом текста.

так вот,я никак не могу сделать так, что бы при клике добавлялся класс к тому списку на который был осуществлен клик и также спан с плюсиком менялся на минус . что бы подчеркнуть открытый пункт

$(document).ready(function(){
    $('#accordion > li ul').click(function(event){
        event.stopPropagation();
    })
        .filter(':not(:first)').hide();
    
$('#accordion > li, #accordion > li > ul > li').click(function(){
    var selfClick = $(this).find('ul:first').is(':visible');
    if(!selfClick) {
        $(this).parent().find('> li ul:visible').slideToggle();
        $(this).find(".minus").fadeToggle('fast');
    };
        $(this).find('ul:first').stop(true, true).slideToggle();
        $(this).find(".plus").fadeToggle('fast');
    });
});

Короче что то я тут намутил со спанами . ничего не получается .
С уважением Антон