[Megokryak]

Всем доброго утра.
Собственно делаю оглавлени к учебнику:

<div id="mainManual">
<h2>Оглавление</h2>
    <ul>
    <li class='manual_open'><span>Введение</span>
<ul id='sub'>
<li class='file'><a href='?view=manual&amp;id=7'>Установка</a></li>
<li class='file'><a href='?view=manual&amp;id=8'>Программное обеспечение</a></li>
</ul>
</li>
<li class='manual_open'><span>Глава 1</span>
<ul id='sub'>
<li class='file'><a href='?view=manual&amp;id=10'>Интерфейс программы</a></li>
</ul></li>
    </ul>
</div>

При клике на надпись Введение появляется подменю - Установка, ПО и элементу с классом manual_open я меняю класс на manual_close. Чтобы поменялась картинка слева от Введения.

Теперь необходимо при клике на элемент класса manual_close менялся класс обратно на manual_open.

код:

$('.manual_open>span').click(function(){
        var i = 0;
        i++;
        var parentElement = $(this).parent();
        parentElement.attr('class', 'manual_close');
        $("#sub",parentElement).toggle();
    });
    
    $('.mainManual ul').on('click', '.manual_close', function(){
        alert("tyt");
    });

Направьте кто может меня по правильному пути)