jQuery Toggle with Cookie
- by Cameron
I have the following toggle system, but I want it to remember what was open/closed using the jQuery cookie plugin. So for example if I open a toggle and then navigate away from the page, when I come back it should be still open.
This is code I have so far, but it's becoming rather confusing, some help would be much appreciated thanks.
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;
});
and this is a snippet of the HTML it works with:
<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>
