title: How can I create a cookie for click and toggle function on javascript?
body: <p>I haven't find a solution for my problem. I want to create a cookie for following function.</p>
  
  <p>I need a cookie for each click functions and their variables. If something change on the page, on the next visit should be stay like that.</p>
  
  <p>Can anybody help me please?</p>
  
  <p><a href="http://jsfiddle.net/efealbayrak/z3u5eoo5/1/" rel="nofollow">JSFiddle Demo</a></p>
  
  <pre><code>&lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"&gt;&lt;/script&gt;
  &lt;div id="m"&gt;
      &lt;div id="cbb"&gt;&lt;/div&gt; &lt;a href="#" id="cb"&gt;cb&lt;/a&gt;
  
      &lt;div id="cbf"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="f"&gt;
      &lt;div id="ft"&gt; &lt;a href="#" id="fh"&gt;fh&lt;/a&gt;
   &lt;a href="#" id="fs"&gt;fs&lt;/a&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;style&gt;
      body {
          margin: 0;
          padding: 0;
      }
      #m {
          background: grey;
          position: absolute;
          top: 0px;
          bottom: 100px;
          width: 100%;
      }
      #cbb {
          height: 50px;
          width: 50px;
          background: green;
      }
      #cb.hide {
          background: red;
      }
      #cbf {
          height: 50px;
          width: 50px;
          background: red;
      }
      #ft {
          background: yellow;
      }
      #fs {
          display: none;
      }
      #f {
          position: fixed;
          height: 100px;
          width: 100%;
          background: purple;
          bottom: 0;
      }
  &lt;/style&gt;
  
  &lt;script&gt;
      function setCookie(cookie_name, cvalue, exdays) {
          var d = new Date();
          d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
          var expires = "expires=" + d.toGMTString();
          document.cookie = cookie_name + "=" + cvalue + "; " + expires;
      }
      $.fn.toggleAttr = function (attr, attr1, attr2) {
          return this.each(function () {
              var self = $(this);
              if (self.attr(attr) == attr1) self.attr(attr, attr2);
              else self.attr(attr, attr1);
          });
      };
      jQuery("window").ready(function ($) {
          /* Toggle */
          $('#cb').click(function () {
              $('#cbf').stop(true, true).slideToggle(500);
              $('#cbb').toggle();
              $('#cb').toggleClass('hide');
              $('#cb').toggleAttr('title', 'Hide', 'Show');
          });
          /* Hide and show */
          $('#fh').click(function () {
              $('#f').css('height', '15px');
              $('#m').css('bottom', '15px');
              $('#fh').css('display', 'none');
              $('#fs').css('display', 'block');
          });
          $('#fs').click(function () {
              $('#f').css('height', '100px');
              $('#m').css('bottom', '100px');
              $('#fs').css('display', 'none');
              $('#fh').css('display', 'block');
          });
      });
  
  &lt;/script&gt;
  </code></pre>