Set cookie for div state (java script)

Set cookie for div state (java script)

i have a function that controls two divs (collapse and collapse1). If one
is set to style:block, other is style:none. The default style is <div
id="collapse1" style="display:none;"> and <div id="collapse"
style="display:block;"> This is also allways retrived on refresh or page
load.
The function goes like this:
$(function() {
$('.nav-toggle').click(function(){
//get collapse content selector
var collapse_content_selector = $(this).attr('href');
//make the collapse content to be shown or hide
var toggle_switch = $(this);
$(collapse_content_selector).toggle(function(){
if($(this).css('display')=='none'){
toggle_switch.html('Show');//change the button
label to be 'Show'
document.getElementById('collapse').style.display
= "block";
}else{
toggle_switch.html('Hide');//change the button
label to be 'Hide'
document.getElementById('collapse').style.display
= "none";
}
});
});
});
So, how can i set the cookies for this function, so that if page gets
refreshed, div style remains as selected, and doesnot go to default?
Thanks for your help!