I have problems with cookies

I have problems with cookies

Hello everyone!!!

I'm starting with jQuery and specially with cookies. As a test application I'm using a nested list with a collapsible effect created with jQuery.

The effect is working fine and now I'm trying the next level which is save the state of the list between reloads. For this I'm using cookies (jquery.cookie.js) but there is something strange that I can't understand. 

The cookie is been saved in the browser but I can't get the value after reloading the page. 




This is how my code looks like:

  2. <script type="text/javascript">
  3. $(document).ready(function() {
  4. $('ul li').children('ul').hide();
  6. var c = $.cookie(this.id);
  7. if(c === 'true') {
  8. console.log(c);
  9. alert('Value');
  10. } else {
  11. alert('no Value');
  12. }
  14. $('ul li').addClass('reveal');
  16. $('.reveal').each(function(i) {
  17. $(this).attr('id', 'li'+i++);
  18. });
  20. $('.reveal').click(function() {
  21. $(this).children('ul').slideDown();
  22. $.cookie(this.id, 'true');
  23. console.log($.cookie(this.id));
  24. });
  25. });
  26. </script>
  28. </head>
  29. <body>
  31. <ul>
  32. <li>
  33. <span>Header</span>
  34. <ul>
  35. <li><a href="page2.html">Page 2</a></li>
  36. <li>No link</li>
  37. <li><a href="page2.html">Page 2</a></li>
  38. </ul>
  39. </li>
  40. <li>Header</li>
  41. <li>Header</li>
  42. <li>
  43. <span>Header</span>
  44. <ul>
  45. <li><a href="page2.html">Page 2</a></li>
  46. <li>
  47. <span>Header</span>
  48. <ul>
  49. <li><a href="page2.html">Page 2</a></li>
  50. <li>No link</li>
  51. <li><a href="page2.html">Page 2</a></li>
  52. </ul>
  53. </li>
  54. <li><a href="page2.html">Page 2</a></li>
  55. </ul>
  56. </li>
  58. </ul>
  59. </body>
      Of course I'm calling jQuery and jquery.cookies.js in the head before the $(document).ready 
What I'm doing wrong? 

Thanks for your help!!!