jquery - Toggle class in a nested List -

jquery - Toggle class in a nested List -

i have next construction me

<ul id="budor"> <li class="l-1">first <ul> <li class="l-2">first kid <ul> <li>abc</li> <li>xyz</li> </ul> </li> <li class="l-2">second kid <ul> <li>pqr</li> <li>dfg</li> </ul> </li>

i adding +/- icons in front end of nodes. css structure

.handle { background: transparent url( /images/openedclosed.png ) no-repeat left top; } .closed { background-position: left top; } .opened { background-position: left -5px; }

on click event, want utilize toggleclass toggle between + , - depending on expand/ collapse state

$('#budor li').on('click', function (e) { $(this).children('ul').slidetoggle().toggleclass('handle closed', 'handle opened'); });

however not working. doing wrong?

[extra info]: every parent , kid list has nodes within can opened , have expand (+). when user clicks expand node, (+) should alter (-). when node clicked 1 time again collapses , (-) changed (+).

i'm not sure lists want mark closed/open this?

$('#budor li').on('click', function (e){ $("#budor>li>ul").toggleclass('closed'); $("#budor>li>ul").toggleclass('opened'); });

jquery