Made slight modifications to your code:
<script>
function clickArrow()
{
$('#wrappernav').fadeOut("fast");
$('#sidebar').fadeOut("fast");
$('#wrappernavbg').fadeOut("fast");
$('#naviclosed').fadeIn("fast");
$(window).unbind('resize');
}
$(document).ready(function(){
//Do the animations automatically IF the cookie value was SET.
var arrowClicked = parseInt($.cookies.get('arrowClicked'));
if (arrowClicked > 0) {
clickArrow();
}
$("#arrow").bind('click', function(){
//Perform actions
clickArrow();
//I want jQuery to remember this state after refresh.
$.cookies.set('arrowClicked', 1);
});
$('#naviclosed').bind('click', function () {
$('#wrappernav').fadeIn("fast");
$('#sidebar').fadeIn("fast");
$('#wrappernavbg').fadeIn("fast");
$('#naviclosed').fadeOut("fast");
$(window).bind('resize', ScreenSize);
});
});
Visit this link for more details of Cookie plugin: http://code.google.com/p/cookies/
Also please include jquery.cookie.js only after jquery.js