Memorizza lo stato toggle su div dopo l'aggiornamento della pagina

Question

Ho un div che si espande/collassa a un'altezza automatica in base ai clic del pulsante. Ho funzionato bene, ma mi piacerebbe usare jquery.cookie.js per ricordare se l'utente lo ha espanso o meno, in modo che rimanga aperto all'aggiornamento della pagina. Ho esaminato domande simili

ad es. Keep toggle state on divs using cookie.js after page refresh

tuttavia non riesco a farlo funzionare per la mia situazione. Non è solo un semplice show/hide, e sto avendo problemi a capire la sintassi per impostare e utilizzare correttamente il cookie. Ecco un po 'del mio codice di lavoro, forse qualcuno può aiutarmi?

http://jsfiddle.net/j2Rsy/

e qui è il codice rilevante:

$('#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

Prova

$('#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