jquery cookie setup - jquery-cookie

Question

I am a newbie at jquery. I've been researching how to set cookies for a jquery function using the cookie plugin.
I have this simple hide and show function for a div but want the class states to persist after links to other pages and refreshing.
The JS looks like this
<script type="text/javascript">
$(document).ready(function(){
$("div.toggle_search").hide();
$("h2.trigger_up").click(function() {
$(this).toggleClass("active").prev().slideToggle(250);
if ($.cookie('more_search','1')) {
$("#criteria").attr('class', $.cookie('more_search'));
} else {
$("#criteria").attr('class', 'active');
}
$.cookie('more_search', $(".trigger_up").attr('class'));
return false;
});
});
</script>
HTML
<div id="criteria">
<div class="toggle_search">
<div class='left'>
Stuff goes here
</div>
</div>
<h2 class="trigger_up">See More Search Criteria</h2>
<div class="clear"></div>
</div>
Any help would be greatly appreciated. !

Answer 1

Check the cookie before you show or hide the div. In this snippet, the div with id="moreButton" (not an actual button) has text saying "More" or "Less" for showing and hiding the div with id="moreOptions":
$(document).ready(function() {
if ($.cookie("show") == "show") {
$("#moreButton").html("Less «");
$("#moreButton").attr("title", "Hide the extra search parameters.");
$("#moreOptions").show();
}
else {
$("#moreButton").html("More »");
$("#moreButton").attr("title", "See more search options.");
}
$("#moreButton").click(function() {
$("#moreOptions").animate({ "height": "toggle" }, { duration: 60 });
if ($("#moreButton").html() == "More »") {
$("#moreButton").html("Less «");
$("#moreButton").attr("title", "Hide the extra search parameters.");
$.cookie("show", "show", { path: '/' })
}
else {
$("#moreButton").html("More »");
$("#moreButton").attr("title", "See more search options.");
$.cookie("show", "", { path: '/' })
};
});
}
);

Answer 2

Have you included the reference to the jQuery-cookie library?
See the documentation found here at the plugin page it looks like you are using or trying to use, https://github.com/carhartl/jquery-cookie/
By setting the cookie to expire in the future, it should persist until it hits the expiration date.
Ex: $.cookie('more_search', $(".trigger_up").attr('class'), { expires: 7 });
//Would expire in a week.
Also notice you have two classes when you get $(".trigger_up").attr('class') trigger_up and active (when the link is clicked for the first time), you might want to parse that the cookie value is set to "active"