Toggle-Status bei div nach Seitenaktualisierung beibehalten

Question

Ich habe ein div, das basierend auf Schaltflächenklicks zu einer automatischen Höhe expandiert/kollabiert. Ich habe das funktioniert gut, aber ich würde gerne jquery.cookie.js verwenden, um zu erinnern, ob der Benutzer es erweitert oder nicht, so dass es bei der Seitenaktualisierung geöffnet bleibt. Ich habe ähnliche Fragen betrachtet

z.B. Keep toggle state on divs using cookie.js after page refresh

jedoch kann ich nicht scheinen, um dies für meine Situation zu arbeiten. Es ist nicht nur ein einfaches Zeigen/Verbergen, und ich habe Probleme, die Syntax herauszufinden, um den Cookie richtig einzustellen und zu verwenden. Hier ist eine Geige meines Arbeitscodes, vielleicht kann mir jemand helfen?

http://jsfiddle.net/j2Rsy/

und hier ist der entsprechende 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

$('#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 Versuchen: Das funktioniert Fiddle