title: Setting a cookie for sidebar toggled display
body: <p>I did not make this javascript, but i am trying to edit it to include a cookie for the toggle status of the whole sidebar rather than just the div inside the sidebar any help? i suck at JS and this is all jibberish to me.</p>
  
  <pre><code>    vB_XHTML_Ready.subscribe(init_sidebar);
  function init_sidebar() {
      new vBSidebar()
  }
  function vBSidebar() {
      this.init()
  }
  vBSidebar.prototype.init = function() {
      this.sidebar_button = YAHOO.util.Dom.get("sidebar_button");
      this.sidebar_container = YAHOO.util.Dom.get("sidebar_container");
      this.sidebar = YAHOO.util.Dom.get("sidebar");
      this.content_container = YAHOO.util.Dom.get("content_container");
      this.content = YAHOO.util.Dom.get("content");
      YAHOO.util.Event.on(this.sidebar_button, "click", this.toggle_collapse, this, true)
  };
  vBSidebar.prototype.toggle_collapse = function(A) {
      YAHOO.util.Event.stopEvent(A);
      if (YAHOO.util.Dom.getStyle(this.sidebar, "display") == "none") {
          this.expand()
      } else {
          this.collapse(true)
      }
      return false
  };
  vBSidebar.prototype.collapse = function(A) {
      var B = this.sidebar_button;
      if (A) {
          var C = new YAHOO.util.Anim(this.sidebar, {
              opacity: {
                  from: 1,
                  to: 0
              }
          }, 0.3);
          C.onComplete.subscribe(function(G, D, E) {
              YAHOO.util.Dom.setStyle(E.sidebar, "display", "none");
              YAHOO.util.Dom.setStyle(E.sidebar_container, "width", "0");
              var F;
              if (sidebar_align == "right") {
                  F = new YAHOO.util.Anim(E.content_container, {
                      marginRight: {
                          to: 0
                      }
                  }, 0.3);
                  F.animate();
                  F = new YAHOO.util.Anim(E.content, {
                      marginRight: {
                          to: 0
                      }
                  }, 0.3);
                  F.onComplete.subscribe(function() {
                      YAHOO.util.Dom.setAttribute(B, "src", IMGDIR_MISC + "/tab-expanded.png")
                  });
                  F.animate()
              } else {
                  F = new YAHOO.util.Anim(E.content_container, {
                      marginLeft: {
                          to: 0
                      }
                  }, 0.3);
                  F.animate();
                  F = new YAHOO.util.Anim(E.content, {
                      marginLeft: {
                          to: 0
                      }
                  }, 0.3);
                  F.onComplete.subscribe(function() {
                      YAHOO.util.Dom.setAttribute(B, "src", IMGDIR_MISC + "/tab-expanded-left.png")
                  });
                  F.animate()
              }
          }, this);
          C.animate()
      } else {
          YAHOO.util.Dom.setStyle(this.sidebar, "display", "none");
          YAHOO.util.Dom.setStyle(this.sidebar_container, "width", "0");
          if (sidebar_align == "right") {
              YAHOO.util.Dom.setAttribute(B, "src", IMGDIR_MISC + "/tab-expanded.png");
              YAHOO.util.Dom.setStyle(this.content_container, "marginRight", "0");
              YAHOO.util.Dom.setStyle(this.content, "marginRight", "0")
          } else {
              YAHOO.util.Dom.setAttribute(B, "src", IMGDIR_MISC + "/tab-expanded-left.png");
              YAHOO.util.Dom.setStyle(this.content_container, "marginLeft", "0");
              YAHOO.util.Dom.setStyle(this.content, "marginLeft", "0")
          }
      }
      this.save_collapsed("1")
  };
  vBSidebar.prototype.expand = function() {
      var B;
      var A = this.sidebar_button;
      if (sidebar_align == "right") {
          B = new YAHOO.util.Anim(this.content_container, {
              marginRight: {
                  to: (0 - content_container_margin)
              }
          }, 0.3);
          B.animate();
          B = new YAHOO.util.Anim(this.content, {
              marginRight: {
                  to: content_container_margin
              }
          }, 0.3);
          B.onComplete.subscribe(function(F, C, D) {
              YAHOO.util.Dom.setStyle(D.sidebar, "display", "block");
              YAHOO.util.Dom.setStyle(D.sidebar_container, "width", sidebar_width + "px");
              var E = new YAHOO.util.Anim(D.sidebar, {
                  opacity: {
                      from: 0,
                      to: 1
                  }
              }, 0.3);
              E.onComplete.subscribe(function() {
                  YAHOO.util.Dom.setAttribute(A, "src", IMGDIR_MISC + "/tab-collapsed.png")
              });
              E.animate()
          }, this);
          B.animate()
      } else {
          B = new YAHOO.util.Anim(this.content_container, {
              marginLeft: {
                  to: (0 - content_container_margin)
              }
          }, 0.3);
          B.animate();
          B = new YAHOO.util.Anim(this.content, {
              marginLeft: {
                  to: content_container_margin
              }
          }, 0.3);
          B.onComplete.subscribe(function(F, C, D) {
              YAHOO.util.Dom.setStyle(D.sidebar, "display", "block");
              YAHOO.util.Dom.setStyle(D.sidebar_container, "width", sidebar_width + "px");
              var E = new YAHOO.util.Anim(D.sidebar, {
                  opacity: {
                      from: 0,
                      to: 1
                  }
              }, 0.3);
              E.onComplete.subscribe(function() {
                  YAHOO.util.Dom.setAttribute(A, "src", IMGDIR_MISC + "/tab-collapsed-left.png")
              });
              E.animate()
          }, this);
          B.animate()
      }
      this.save_collapsed("0")
  };
  vBSidebar.prototype.save_collapsed = function(A) {
      expires = new Date();
      expires.setTime(expires.getTime() + (1000 * 86400 * 365));
      set_cookie("vbulletin_sidebar_collapse", A, expires)
  };
  </code></pre>
  
  <p>at the very end i see the set cookie... but its not right, that cookie sets the status of the</p>
  
  <p><code>&lt;div class="block smaller"&gt;</code></p>
  
  <p>and i want it to set the status of the</p>
  
  <pre><code>&lt;ul id="sidebar"&gt;
  </code></pre>
  
  <p>the complete body looks like:</p>
  
  <pre><code>&lt;body&gt;
  &lt;div class="body_wrapper"&gt;
  
  
      &lt;div id="content_container" class=" "&gt;
          &lt;div id="content" &gt;
  
      &lt;!-- main --&gt;
  
      &lt;ol id="forums" class="floatcontainer"&gt;
          &lt;li class="forumbit_nopost old L1" id="cat1"&gt;
      &lt;div class="forumhead foruminfo L1 collapse"&gt;
          &lt;h2&gt;
              &lt;center&gt;Content Content Content &lt;/center&gt;
          &lt;/h2&gt;
      &lt;/div&gt;
  &lt;/li&gt;
      &lt;/ol&gt;
  
      &lt;!-- /main --&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div id="sidebar_container" class=""&gt;
  
  &lt;div class="clear"&gt;&lt;/div&gt;
  
          &lt;a id="sidebar_button_link" href="#"&gt;
  
              &lt;img id="sidebar_button" src="images/misc/tab-collapsed.png" alt="" /&gt;
  
          &lt;/a&gt;
          &lt;ul id="sidebar"  &gt;
              &lt;li&gt;
      &lt;div class="block smaller"&gt;
          &lt;div class="blocksubhead"&gt;
              &lt;a class="collapse" id="collapse_block_html_3" href="#top"&gt;&lt;img alt="" src="images/misc/collapse_40b.png" id="collapseimg_html_3"/&gt;&lt;/a&gt;
              &lt;span class="blocktitle"&gt;Sidebar&lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="widget_content blockbody floatcontainer"&gt;
          &lt;div id="block_html_3" class="blockrow"&gt;
              Sidebar Sidebar Sidebar
          &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="underblock"&gt;&lt;/div&gt;
  &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  
  
  &lt;div style="clear:both;"&gt;&lt;/div&gt;
  
  
  &lt;div id="footer" class="floatcontainer footer"&gt;
  
  FOOTER
  
  &lt;/div&gt;
  &lt;/div&gt; 
  
  &lt;/body&gt;
  </code></pre>
  
  <p>sorry for not making a JSFiddle, but it would not run in JSFiddle, you can see a live example of what i have though at <a href="http://dirtrif.com/index.php?styleid=9" rel="nofollow">http://dirtrif.com/index.php?styleid=9</a></p>