Nhớ trạng thái chuyển đổi trên div sau khi làm mới trang

Question

Tôi có div mở rộng/thu gọn thành chiều cao tự động dựa trên nhấp chuột vào nút. Tôi có làm việc tốt, nhưng tôi muốn sử dụng jquery.cookie.js để nhớ nếu người dùng mở rộng nó hay không, để nó vẫn mở trên làm mới trang. Tôi đã xem các câu hỏi tương tự

ví dụ: Keep toggle state on divs using cookie.js after page refresh

tuy nhiên tôi dường như không thể làm việc này cho tình huống của mình. Nó không chỉ là một chương trình thẳng/ẩn, và tôi đang gặp khó khăn trong việc tìm ra cú pháp để thiết lập đúng và sử dụng cookie. Đây là một đoạn mã làm việc của tôi, có lẽ ai đó có thể giúp tôi?

http://jsfiddle.net/j2Rsy/

và đây là mã có liên quan:

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

Hãy thử

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