Question

here is my code:

$(document).ready(function() {
    $("#root ul").each(function() {$(this).css("display", "none");});
    $("#root .category").click(function() {
        var childid = "#" + $(this).attr("childid");
        if ($(childid).css("display") == "none")     {
            $(childid).css("display", "block");
        }
        else {
            $(childid).css("display", "none");
        }
        if ($(this).hasClass("cat_close")) {
            $(this).removeClass("cat_close").addClass("cat_open");}
        else {
            $(this).removeClass("cat_open").addClass("cat_close");
        }
    });
});

Can you help me out in creating/setting a cookie that will remember the menu box that was opened after leaving the page or clicking a link? BTW, I would like to use Jquery cookie plugin.

Thank you!!

Answer 1

Use jquery-cookie plugin

Your code will looks like (if I correctly understand what is here):

<script type="text/javascript">
    jQuery(document).ready(function () {

        var selectedId = jQuery.cookie('selected-sub-menu-id'); // get selected submenu id
        jQuery("#root ul").each(function () {
            if (jQuery(this).attr('id') != selectedId) {
                jQuery(this).css("display", "none");
            }
        });
        jQuery("#root .category").click(function () {
            var childid = "#" + jQuery(this).attr("childid");

            jQuery(childid).toggle();

            if (jQuery(this).hasClass("cat_close")) {
                jQuery(this).removeClass("cat_close").addClass("cat_open"); 
            }
            else {
                jQuery(this).removeClass("cat_open").addClass("cat_close");
            }
            jQuery.cookie('selected-sub-menu-id', childid.substring(1)); // set selected submenu id
        });

    });
</script>