Cookie in show/hide div toggle

Question

My script:

function ShowHide(){
$("#news1").animate({"height": "toggle"}, { duration: 250 });
}

Question:
How can I insert a cookie to this, so that when I hide it, it will remain hidden after refreshing the page.
Appreciate the help.

Answer 1

Toggle seems to set the height back and forth from 0 and the 'normal' value ( source: http://api.jquery.com/animate/ ).

As the last line of your function, perhaps you can add:

if ( $('#news1').css('height')==0 )
    # set cookie here with jquery cookie plugin or browser mechanism
    # see http://stackoverflow.com/questions/1458724/how-to-set-unset-cookie-with-jquery

And then add appropriate code before the document is ready: "if I detect the cookie says it was hidden last time, don't show it"

edit: though if you are doing this a lot, I would recommend a framework or plugin that has well-supported mechanism for this

Answer 2

For cookie manipulation you could use jQuery.cookie

the code will become:

function ShowHide(){
   $("#news1").animate({"height": 0}, 250, function() {
      //this is a callback function. set the cookie here
   });
}

you will also need another js code to check if the cookie is set to hide the div and according hide it. it is better to execute this code on page load or even better, at dom ready.