Tengo el siguiente sistema de alternar, pero quiero que recuerde lo que estaba abierto / cerrado usando el complemento de cookies jQuery. Entonces, por ejemplo, si abro una palanca y luego me alejo de la página, cuando regrese, debería estar abierta. Por defecto, todos los Toggles deben estar cerrados.

Este es el código que tengo hasta ahora, pero se está volviendo bastante confuso, se agradecería un poco de ayuda, gracias.

jQuery.cookie = function (name, value, options) { if (typeof value != 'undefined') { options = options || {}; if (value === null) { value = ''; options = $.extend({}, options); options.expires = -1; } var expires = ''; if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) { var date; if (typeof options.expires == 'number') { date = new Date(); date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000)); } else { date = options.expires; } expires = '; expires=' + date.toUTCString(); } var path = options.path ? '; path=' + (options.path) : ''; var domain = options.domain ? '; domain=' + (options.domain) : ''; var secure = options.secure ? '; secure' : ''; document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join(''); } else { var cookieValue = null; if (document.cookie && document.cookie != '') { var cookies = document.cookie.split(';'); for (var i = 0; i < cookies.length; i++) { var cookie = jQuery.trim(cookies[i]); if (cookie.substring(0, name.length + 1) == (name + '=')) { cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); break; } } } return cookieValue; } };
        // var showTop = $.cookie('showTop');
        if ($.cookie('showTop') == 'collapsed') {

            $(".toggle_container").hide();
            $(".trigger").toggle(function () {
                $(this).addClass("active");
            }, function () {
                $(this).removeClass("active");
            });
            $(".trigger").click(function () {
                $(this).next(".toggle_container").slideToggle("slow,");
            });
        } else {

            $(".toggle_container").show();
            $(".trigger").toggle(function () {
                $(this).addClass("active");
            }, function () {
                $(this).removeClass("active");
            });
            $(".trigger").click(function () {
                $(this).next(".toggle_container").slideToggle("slow,");
            });
        };

        $(".trigger").click(function () {
            if ($(".toggle_container").is(":hidden")) {
                $(this).next(".toggle_container").slideToggle("slow,");
                $.cookie('showTop', 'expanded');
            } else {
                $(this).next(".toggle_container").slideToggle("slow,");
                $.cookie('showTop', 'collapsed');
            }

            return false;

        });

y este es un fragmento del HTML con el que funciona:

<li> 
                                        <label for="small"><input type="checkbox" id="small" /> Small</label> 
                                        <a class="trigger" href="#">Toggle</a>  
                                        <div class="toggle_container"> 
                                            <p class="funding"><strong>Funding</strong></p> 
                                            <ul class="childs"> 
                                                <li class="child"> 
                                                    <label for="fully-funded1"><input type="checkbox" id="fully-funded1" /> Fully Funded</label> 
                                                    <a class="trigger" href="#">Toggle</a> 
                                                    <div class="toggle_container"> 
                                                        <p class="days"><strong>Days</strong></p> 
                                                        <ul class="days clearfix"> 
                                                            <li><label for="1pre16">Pre 16</label> <input type="text" id="1pre16" /></li> 
                                                            <li><label for="2post16">Post 16</label> <input type="text" id="2post16" /></li> 
                                                            <li><label for="3teacher">Teacher</label> <input type="text" id="3teacher" /></li> 
                                                        </ul> 
                                                    </div> 
                                                </li>