Remember toggle state on div after page refresh

Question

I have a div that expands/collapses to an automatic height based on button clicks. I have that working just fine, but I would like to use jquery.cookie.js to remember if the user expanded it or not, so that it stays open on page refresh. I've looked at similar questions

e.g. Keep toggle state on divs using cookie.js after page refresh

however I can't seem to get this to work for my situation. It's not just a straight show/hide, and I'm having trouble figuring out the syntax to properly set and use the cookie. Here is a fiddle of my working code, perhaps someone can help me?

http://jsfiddle.net/j2Rsy/

and here is the relevant code:

$('#viewless').hide();
$('#viewmore').click(function(){
    var el = $('#resize01'),
    curHeight = el.height(),
    autoHeight = el.css('height', 'auto').height();
    el.height(curHeight).animate({height: autoHeight}, 500);
    $('#viewmore').toggle();
    $('#viewless').toggle();
});

$('#viewless').click(function(){
$('#resize01').animate({height: '190'}, 500);
    $('#viewmore').toggle();
    $('#viewless').toggle();
});

Answer 1

Try

$('#viewless').hide();
$('#viewmore').click(function(){
    var el = $('#resize01'),
        curHeight = el.height(),
        autoHeight = el.css('height', 'auto').height();
    el.height(curHeight).animate({height: autoHeight}, 500);
    $('#viewmore').hide();
    $('#viewless').show();

    $.cookie('viewmore', true);

});

$('#viewless').click(function(){
    $('#resize01').animate({height: '190'}, 500);
    $('#viewmore').show();
    $('#viewless').hide();

    $.cookie('viewmore', false);
});

if($.cookie('viewmore') == 'true'){
    $('#viewmore').click();
} else {
    $('#viewless').click();
}

Demo: Fiddle