Dismiss a message

Hi there,

I just try to figure out a function which will dismiss a text and saves it in cookies for next page reload/visit. My current code looks as follow:

<script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="jquery.cookie.js" type="text/javascript"></script>

<script>
$(document).ready(function() {
		
			
			$.cookie("viewState");
			
			
			var theState = $.cookie("viewState");
			
			
			$("#R1").toggle(
				function () {
					$("#secret").hide("slow");
					
					$.cookie("viewState", "block");
					theState = "block"
				},
				function () {
					$("#secret").hide("slow");
					
					$.cookie("viewState", "none");
					theState = "none"
			});
			
			
			$("#secret").css('display', theState);
			
		});
		</script>

Code (markup):

and the message for dismissing:

<div id="secret" style="display:none;" class="theme"><p>Test


  <a href="#" class="button" id="R1">Done</a>
  
  </p>
</div>

<script>

    
    $("a.button").click(function () {
      $("div.theme").hide("slow");
      $(this).hide();


      return true;
    });
</script>

Code (markup):

For now, the message is dimissed but not saved in the cookies correctly. I don't have skills to fix this. Thanks for help.

 

I think I have made some change to hide it which is working but it takes a second while it dissapeared after page is loaded. Where did I make mistake?

<script>
$(document).ready(function() { 
		
			
			$.cookie("viewState");
			

			var theState = $.cookie("viewState");
			
			
			$("#R1").click(
				function () {
					$("#secret").hide("slow");
					
					$.cookie("viewState", "none");
					theState = "none"
			});
			

			$("#secret").css('display', theState);
			
		});
		</script>

Code (markup):