define actions for li item

Question

I wont to perform action for the clicked li, as for expample toggle the nested ul

this is the html

<script type="text/javascript">
$(function() {
    $('#verticalfade').verticalfade();
});
</script>
<div id="verticalfade_container">
    <ul id="verticalfade">
        <li>Le Collezioni
            <ul>
                <li>Link 1</li>
                <li>Link 2</li>
            </ul>
        </li>
        <li>Extra Plus
            <ul>
                <li>Link 1</li>
                <li>Link 2</li>
            </ul>
        </li>
    </ul>
</div>

This is the javascript:

(function($){
    $.fn.extend( {
        verticalfade: function(options){

            var defaults = {
                speed: 'normal'
            };
            var options = $.extend(defaults, options);


            $('ul#verticalfade li ul').each(function(){
                $('ul#verticalfade li ul').hide();
            });    

            $('ul#verticalfade li').each(function(){
                $(this).click(function(){
                    $(this).next('ul').toggle(500);
                });
        });
        }    
    });
})(jQuery);

i hide all the sub ul in the list but i cannot define a function for each li to show the next ul only. i tried the next('ul') function but i can only toggle all the ul at once.

Answer 1

change $(this).next('ul').toggle(500); to

//first line hides the previously clicked li's children $(this).siblings('li').children('ul').slideUp(); $(this).children('ul').toggle(500);

Answer 2

Here's a simple variant (full source at http://gist.github.com/575089):

In essence:

$('ul#verticalfade > li > ul').each(function(){
        $(this).hide();
    });    

$("ul#verticalfade > li").click(function(){
    $("ul", this).toggle(500);
});