Accordion Menu with Cookie

by Nadeem Arshad

HTML

<ul class="b29-tree">
            <li><a href="#">Test</a>
                <ul>
                    <li><a href="#">Test</a></li>
                    <li><a href="#">Test</a></li>
                    <li><a href="#">Test</a></li>
                    <li><a href="#">Test</a></li>
                    <li><a href="#">Test</a></li>
                </ul>
            </li>
            <li><a href="#">Test</a>
                <ul>
                    <li><a href="#">Test</a></li>
                    <li><a href="#">Test</a></li>
                    <li><a href="#">Test</a></li>
                    <li><a href="#">Test</a></li>
                    <li><a href="#">Test</a></li>
                </ul>
            </li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test Has</a>
                <ul>
                    <li><a href="#">Test</a></li>
                    <li><a href="#">Test</a></li>
                    <li><a href="#">Test</a></li>
                    <li><a href="#">Test</a></li>
                    <li><a href="#">Test</a>
                        <ul>
                            <li><a href="#">Test</a></li>
                            <li><a href="#">Test</a></li>
                            <li><a href="#">Test</a></li>
                            <li><a href="#">Test</a>
                                <ul>
                                    <li><a href="#">Test</a></li>
                                    <li><a href="#">Test</a></li>
                                    <li><a href="#">Test</a></li>
                                    <li><a href="#">Test</a></li>
                                    <li><a href="#">Test</a></li>
                                </ul></li>
                            <li><a href="#">Test</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#">Test</a></li>
        </ul>

        <ul class="b29-tree">
            <li><a...

CSS

ul.b29-tree ul {
                display: none;
            }
            .switch {
                cursor: pointer;
                border: #000 1px solid;
                width: 16px;
                height: 16px;
                display: inline-block;
                text-align: center;
                line-height: 16px;
            }

JavaScript

// baking cookie ;p
                function set_cookie(ID) {
                    document.cookie = ID + "=opened";
                }

                // getting it out from the oven... ;)
                function get_cookies_array() {

                    var cookies = {};

                    if (document.cookie && document.cookie != '') {
                        var split = document.cookie.split(';');
                        for (var i = 0; i < split.length; i++) {
                            var name_value = split[i].split("=");
                            name_value[0] = name_value[0].replace(/^ /, '');
                            cookies[decodeURIComponent(name_value[0])] = decodeURIComponent(name_value[1]);
                        }
                    }

                    return cookies;

                }

                // yuck... sorry i don't know how to cook :S
                function unset_cookie(cookie_name) {
                    var cookie_date = new Date();
                    cookie_date.setTime(cookie_date.getTime() - 1);
                    document.cookie = cookie_name += "=; expires=" + cookie_date.toGMTString();
                }

                var tree_id = 0;
                jQuery('ul.b29-tree li:has(ul)').addClass('has-child').prepend('<span class="switch">+</span>').each(function () {
                    tree_id++;
                    jQuery(this).attr('id', 'tree' + tree_id);
                });

                jQuery('ul.b29-tree li > span.switch').click(function () {
                    var tree_id = jQuery(this).parent().attr('id');
                    if (jQuery(this).hasClass('open')) {
                        jQuery(this).parent().find('ul:first').slideUp('fast');
                        jQuery(this).removeClass('open');
                        jQuery(this).text('+');
                        unset_cookie(tree_id)
                    } else {
                       ...