Hidden DIV state?

I'm trying to impliment the use of DIV blocks in the left hand side bar of my currently in development website.
The idea is to have these blocks so they can be toggled between hidden and shown. this bit i have already managed to do but now i need to find a way for them to remain in the users chosen state while they browse around the site.
Presently they pop back to their default state with every page refresh or change.

I'm aware that i could have this on either a per session or a perminant cookie but have absoloutley no idea how to get this working.

So it falls to me to ask the wonderful members of Web Wiz ( arse kissing) the best way to do this or any ideas i should take into concideration?

Cheers in advance for any help offered.

Demo page

If you wanna see what i'm talking about click the 'member control panel' or 'SNS Mailing List' links.

Damn i knew it would come down to cookies, i suck at cookies 

Currently i have this code in a seperate 'tooglediv.js' file

function toggleLayer(whichLayer) { if (document.getElementById) { //Standardising var style2 = document.getElementById(whichLayer).style; style2.display = style2.display? "":"block"; } else if (document.all) { // Crappy IE version var style2 = document.all[whichLayer].style; style2.display = style2.display? "":"block"; } else if (document.layers) { // NN4 var style2 = document.layers[whichLayer].style; style2.display = style2.display? "":"block"; } }

And this is the code thats called in the page that the .js is included in

<div id="containerlayer"> <a href="javascript:toggleLayer('hideablelayer');"> Click to toggle layer </a> <div id="hideablelayer"> <!-- ### Content to show or hide is in here ### ---> </div> </div

and the CSS for the toggle'able layer is...

div#hideablelayer { margin: 0px 0px 0px 0px; display: none; }

Woah thats already exceeded my skill capacity 

Thanks for the suggestions, i'll go away and read up on them see what i can figure out