i want to store toggle state in cookie and also want to close previous list when next list is clicked

Question

http://jsfiddle.net/deepansh/BHCZ4/2/ this is a fiddle.

I want to save toggle state in cookie so that after page reload I get the same state, and I want to close previously-open list after clicking for opening new list.

I want to do in in minimum lines.

HTML

<ul class="nav sidebar-nav" id="am_menu">
    <li><a href="#"> <span>User</span></a> 
        <ul>
            <li><a href="#">Add User</a>
            </li>
            <li><a href="#">List User</a>
            </li>
            <li><a href="#">User Profile</a>
            </li>
        </ul>
    </li>
    <li><a href="#"> <span>User</span></a> 
        <ul>
            <li><a href="#">Add User</a>
            </li>
            <li><a href="#">List User</a>
            </li>
            <li><a href="#">User Profile</a>
            </li>
        </ul>
    </li>
</ul>

CSS:

ul {
    width: 200px;
}
img {
    width: 14px;
}
li ul {
    display: none;
}
li ul {
    padding-left: 4em;
    list-style:none;
}
li ul li {
    line-height:35px;
}
li ul li ul {
    padding-left: .5em;
}

JS

$(function () {
    $('li').filter(function (i) {
        return $('ul', this).length >= 1;
    }).each(function (i) {
        $(this).children("a")
            .click(function (e) {
            var $ul = $(this).next("ul");
            if ($ul.is(":visible")) {
                $ul.find("ul").toggle("slow()");
                $ul.toggle("slow()");
            } else {
                $ul.toggle("slow()");
            };
        })

    });
});

Answer 1

jQuery cookie plugin is used

$(function () {
    $('#am_menu li:has(ul) > a').click(function (e) {
        var $ul = $(this).next("ul");
        $ul.toggle("slow");
        $('#am_menu li ul').not($ul).slideUp();
        $.cookie('curr.menu', $(this).parent().index())
    });

    var cindex = $.cookie('curr.menu');
    if (cindex != undefined) {
        $('#am_menu li:has(ul)').eq(cindex).children('a').click()
    }
});

Demo: Fiddle

Answer 2

I'd personally take the approach (using, as in Arun's answer, the $.cookie plugin ):

$(function () {
    var toShow = $.cookie('lastShownIndex'),
        topLevel = $('#am_menu').find('> li');

    topLevel.click(function(){
        $(this).children('ul').slideToggle().end().siblings().children('ul').slideUp();
        $.cookie('lastShownIndex', $(this).index());
    }).eq(toShow).find('ul').show();
});

JS Fiddle demo .

References:

• children() .
• click() .
• end() .
• eq() .
• find() .
• index() .
• show() .
• slideUp() .