title: jquery toggle initially close help required
body: <p>Hello I want help to close the toggle option when document is loaded, but if you try my current code you will notice that the #A is visible when page is loaded, also i tried all other ways to hide it but on every solution i used it automatically hides the toggle button/link please help me to find a way to initially close the toggle here is my code </p>
  
  <p>html</p>
  
  <pre><code>&lt;div id="A"&gt;SideBar&lt;/div&gt;
  &lt;div id="B"&gt;&lt;a href="javascript:" id="toggle"&gt;Toggle&lt;/a&gt;&lt;/div&gt;
  </code></pre>
  
  <p>JavaScript</p>
  
  <pre><code>//Toggle Hide/Show sidebar slowy
  $(document).ready(function(){
      $('#B').click(function(e) {
          e.preventDefault();
          $('#A').toggle('');
          $('#B').toggleClass('extended-panel');  
          return false;  
      });
  }); 
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code> #A, #B {
          position: absolute;
      }
      #A {
          top: 0px;
          width: 250px;
          bottom: 0px;
          background:#404041;
          z-index:999999;
      }
      #B {
          top: 0px;
          left: 250px;
          right: 0;
          bottom: 0px;
      }
  
      /* makes the content take place of the SIDEBAR 
         which is empty when is hided */
      .extended-panel {
        left: 0px !important;
      }
  </code></pre>