Looking to apply cookies property to jQuery checkbox script

First of all, what my script does is allow me to swap divs by using a checkbox.

JS Fiddle Example: http://jsfiddle.net/yHTFF/8/

I'm seeking help with setting up cookies properly for this script. I'd like to set this up so that the div and checkbox the user leaves it at remains the same upon page reload.

Here's my script:

<!--HTML-->
<div id="ontopic_posts">
    Content 1
</div>
<div id="offtopic_posts" style="display: none;">
    Content 2
</div>

<input id="cbox_posts"开发者_JAVA百科 type="checkbox"> show off-topics

<!--JQUERY-->
<script>
jQuery("#cbox_posts").click(function() {
  if ( jQuery(this).is(':checked') )
  {
    jQuery("#offtopic_posts").show();
    jQuery("#ontopic_posts").hide();
  }
  else
  {
    jQuery("#offtopic_posts").hide();
    jQuery("#ontopic_posts").show();
  }  
});
</script>

Thanks!

You attach the event handler before the element exists.

Move the script tag after the input or wrap the script with $(document).ready.