title: Hide side-bar Menu-Toggle when page is loaded
body: <p>I have a hopefully a comprehensive and easy question using the bootstrap 3 framework and side-bar menu-toggle...Currently the side-bar menu is open when my site is launched, and then I can toggle closed once page is loaded...but I was wondering how to reverse this so that the sidebar menu is closed when the page is first loaded?
  Below are the JS frameworks I am using and if more code is needed to understand this question I would be happy to provide it, but thought this may be universal within the bootstrap framwork...thanks in advance!
  Here is the starting template code and the link...
  <a href="http://startbootstrap.com/template-overviews/simple-sidebar/" rel="nofollow">http://startbootstrap.com/template-overviews/simple-sidebar/</a></p>
  
  <pre><code>HTML:
   &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
  
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;meta name="description" content=""&gt;
      &lt;meta name="author" content=""&gt;
  
      &lt;title&gt;Simple Sidebar - Start Bootstrap Template&lt;/title&gt;
  
      &lt;!-- Bootstrap Core CSS --&gt;
      &lt;link href="css/bootstrap.min.css" rel="stylesheet"&gt;
  
      &lt;!-- Custom CSS --&gt;
      &lt;link href="css/simple-sidebar.css" rel="stylesheet"&gt;
  
      &lt;!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --&gt;
      &lt;!-- WARNING: Respond.js doesn't work if you view the page via file:// --&gt;
      &lt;!--[if lt IE 9]&gt;
          &lt;script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"&gt;&lt;/script&gt;
          &lt;script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"&gt;&lt;/script&gt;
      &lt;![endif]--&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;div id="wrapper"&gt;
          &lt;!-- Sidebar --&gt;
          &lt;div id="sidebar-wrapper"&gt;
              &lt;ul class="sidebar-nav"&gt;
                  &lt;li class="sidebar-brand"&gt;
                      &lt;a href="#"&gt;
                          Start Bootstrap
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="#"&gt;Dashboard&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="#"&gt;Shortcuts&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="#"&gt;Overview&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="#"&gt;Events&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="#"&gt;About&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="#"&gt;Services&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="#"&gt;Contact&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
  
          &lt;!-- /#sidebar-wrapper --&gt;
  
          &lt;!-- Page Content --&gt;
          &lt;div id="page-content-wrapper"&gt;
  &lt;div class="toggled"&gt;
              &lt;div class="container-fluid"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-lg-12"&gt;
                          &lt;h1&gt;Simple Sidebar&lt;/h1&gt;
                          &lt;p&gt;This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.&lt;/p&gt;
                          &lt;p&gt;Make sure to keep all page content within the &lt;code&gt;#page-content-wrapper&lt;/code&gt;.&lt;/p&gt;
                          &lt;a href="#menu-toggle" class="btn btn-default" id="menu-toggle"&gt;Toggle Menu&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- /#page-content-wrapper --&gt;
  
      &lt;/div&gt;
      &lt;!-- /#wrapper --&gt;
  
      &lt;!-- jQuery Version 1.11.0 --&gt;
      &lt;script src="js/jquery-1.11.0.js"&gt;&lt;/script&gt;
  
      &lt;!-- Bootstrap Core JavaScript --&gt;
      &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
  
      &lt;!-- Menu Toggle Script --&gt;
      &lt;script&gt;
      $("#menu-toggle").click(function(e) {
          e.preventDefault();
          $("#wrapper").toggleClass("toggled");
      });
      &lt;/script&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  
  
      CSS:
  /*!
   * Start Bootstrap - Simple Sidebar HTML Template (http://startbootstrap.com)
   * Code licensed under the Apache License v2.0.
   * For details, see http://www.apache.org/licenses/LICENSE-2.0.
   */
  
  /* Toggle Styles */
  
  #wrapper {
      padding-left: 0;
      -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      transition: all 0.5s ease;
  }
  
  #wrapper.toggled {
      padding-left: 250px;
  }
  
  #sidebar-wrapper {
      z-index: 1000;
      position: fixed;
      left: 250px;
      width: 0;
      height: 100%;
      margin-left: -250px;
      overflow-y: auto;
      background: #000;
      -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      transition: all 0.5s ease;
  }
  
  #wrapper.toggled #sidebar-wrapper {
      width: 250px;
  }
  
  #page-content-wrapper {
      width: 100%;
      padding: 15px;
  }
  
  #wrapper.toggled #page-content-wrapper {
      position: absolute;
      margin-right: -250px;
  }
  
  /* Sidebar Styles */
  
  .sidebar-nav {
      position: absolute;
      top: 0;
      width: 250px;
      margin: 0;
      padding: 0;
      list-style: none;
  }
  
  .sidebar-nav li {
      text-indent: 20px;
      line-height: 40px;
  }
  
  .sidebar-nav li a {
      display: block;
      text-decoration: none;
      color: #999999;
  }
  
  .sidebar-nav li a:hover {
      text-decoration: none;
      color: #fff;
      background: rgba(255,255,255,0.2);
  }
  
  .sidebar-nav li a:active,
  .sidebar-nav li a:focus {
      text-decoration: none;
  }
  
  .sidebar-nav &gt; .sidebar-brand {
      height: 65px;
      font-size: 18px;
      line-height: 60px;
  }
  
  .sidebar-nav &gt; .sidebar-brand a {
      color: #999999;
  }
  
  .sidebar-nav &gt; .sidebar-brand a:hover {
      color: #fff;
      background: none;
  }
  
  @media(min-width:768px) {
      #wrapper {
          padding-left: 250px;
      }
  
      #wrapper.toggled {
          padding-left: 0;
      }
  
      #sidebar-wrapper {
          width: 250px;
      }
  
      #wrapper.toggled #sidebar-wrapper {
          width: 0;
      }
  
      #page-content-wrapper {
          padding: 20px;
      }
  
      #wrapper.toggled #page-content-wrapper {
          position: relative;
          margin-right: 0;
      }
  }
  </code></pre>