title: Collapse Sidebar on Page load
body: <p>Iam working on a C# MVC project. It works perfectly until today i come across a problem.</p>
  
  <p>I added a new view to the project. It works correctly. But i need to collapse the sidebar when the page loads. The sidebar collapse when i click the collapse button. But i need it on page load.</p>
  
  <p>i found <a href="https://stackoverflow.com/questions/24531937/bootstrap-collapse-sidebar-programatically">this Question :</a> But it didn't help me, as in the answer said i tried adding javascript </p>
  
  <pre><code>$(document).ready(function () {
      $('.sidebartoggler').collapse('toggle');
  })
  </code></pre>
  
  <p>but i come across an error <code>Uncaught Error: Collapse is transitioning</code>.</p>
  
  <p>Here is my layout header code :</p>
  
  <pre><code>&lt;header class="topbar"&gt;
          &lt;nav class="navbar top-navbar navbar-toggleable-sm navbar-light"&gt;
              &lt;!-- ============================================================== --&gt;
              &lt;!-- Logo --&gt;
              ....// code
              &lt;div class="navbar-collapse"&gt;
                  &lt;!-- ============================================================== --&gt;
                  &lt;!-- toggle and nav items --&gt;
                  &lt;!-- ============================================================== --&gt;
                  &lt;ul class="navbar-nav mr-auto mt-md-0"&gt;
                      &lt;!-- This is  --&gt;
                      &lt;li class="nav-item"&gt; &lt;a class="nav-link nav-toggler hidden-md-up text-muted waves-effect waves-dark" href="javascript:void(0)"&gt;&lt;i class="mdi mdi-menu"&gt;&lt;/i&gt;&lt;/a&gt; &lt;/li&gt;
                      &lt;li class="nav-item"&gt; &lt;a class="nav-link sidebartoggler hidden-sm-down text-muted waves-effect waves-dark" href="javascript:void(0)" id="sidebartoggler"&gt;&lt;i class="ti-menu"&gt;&lt;/i&gt;&lt;/a&gt; &lt;/li&gt;
                      &lt;!-- ============================================================== --&gt;
                      &lt;!-- Search --&gt;
                      ....// code
                      &lt;!-- Messages --&gt;
                      ....// code
  
                  &lt;/ul&gt;
                  &lt;!-- ============================================================== --&gt;
                  &lt;!-- User profile and search --&gt;
                  &lt;!-- ============================================================== --&gt;
                  &lt;ul class="navbar-nav my-lg-0"&gt;
                      &lt;!-- ============================================================== --&gt;
                      &lt;!-- Comment --&gt;
                      ....// code
                      &lt;!-- ============================================================== --&gt;
                      &lt;!-- Messages --&gt;                        
                      ....// code
                      &lt;!-- ============================================================== --&gt;
  
                      &lt;!-- Language --&gt;
                      ....// code
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/nav&gt;
      &lt;/header&gt;
  </code></pre>
  
  <p>This is how it looks like: </p>
  
  <p><a href="https://i.stack.imgur.com/QqWFX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QqWFX.png" alt="enter image description here"></a></p>
  
  <p>What i need in page load is something like :</p>
  
  <p><a href="https://i.stack.imgur.com/019mD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/019mD.png" alt="enter image description here"></a></p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>My sidebar code</p>
  
  <pre><code>    &lt;aside class="left-sidebar"&gt;
          &lt;div class="scroll-sidebar"&gt;
              &lt;div class="user-profile"&gt;
                  &lt;div class="profile-text"&gt;
  
  
                      &lt;div class="dropdown-menu animated flipInY"&gt;
                          &lt;a href="~/Company/Index" class="dropdown-item"&gt;&lt;i class="ti-user"&gt;&lt;/i&gt; Company&lt;/a&gt;
                          &lt;a href="#" class="dropdown-item"&gt;&lt;i class="ti-user"&gt;&lt;/i&gt; My Profile&lt;/a&gt;
                          &lt;a href="#" class="dropdown-item"&gt;&lt;i class="ti-wallet"&gt;&lt;/i&gt; My Balance&lt;/a&gt;
                          &lt;a href="#" class="dropdown-item"&gt;&lt;i class="ti-email"&gt;&lt;/i&gt; Inbox&lt;/a&gt;
                          &lt;div class="dropdown-divider"&gt;&lt;/div&gt; &lt;a href="#" class="dropdown-item"&gt;&lt;i class="ti-settings"&gt;&lt;/i&gt; Account Setting&lt;/a&gt;
                          &lt;div class="dropdown-divider"&gt;&lt;/div&gt; &lt;a href="~/Account/Logout" class="dropdown-item"&gt;&lt;i class="fa fa-power-off"&gt;&lt;/i&gt; Logout&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;nav class="sidebar-nav"&gt;
                  &lt;ul id="sidebarnav"&gt;
                      &lt;li&gt;&lt;a href="~/Company/_CompanyDetails"&gt;&lt;i class="fa fa-home"&gt;&lt;/i&gt;Company&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;
                          &lt;a class="has-arrow waves-effect waves-dark" href="#" aria-expanded="false"&gt;&lt;i class="mdi mdi-gauge"&gt;&lt;/i&gt;&lt;span class="hide-menu"&gt;Admin Tables &lt;/span&gt;&lt;/a&gt;
                          &lt;ul aria-expanded="false" class="collapse"&gt;
                              &lt;li&gt;&lt;a href="~/Countries/Index"&gt;Countries&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="~/State/Index"&gt;State&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="~/Tax/Index"&gt;Tax&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="~/Role/Index"&gt;Roles&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="~/Branch/Index"&gt;Branches&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a class="has-arrow waves-effect waves-dark" href="#" aria-expanded="false"&gt;&lt;i class="fa fa-group"&gt;&lt;/i&gt;&lt;span class="hide-menu"&gt;Contacts&lt;/span&gt;&lt;/a&gt;
                          &lt;ul aria-expanded="false" class="collapse"&gt;
                              &lt;li&gt;&lt;a href="~/Customer/Index"&gt;Customers&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="~/Customer/ProspectFollowup"&gt;Prospect Followup&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a class="has-arrow waves-effect waves-dark" href="#" aria-expanded="false"&gt;&lt;i class="fa fa-cart-plus"&gt;&lt;/i&gt;&lt;span class="hide-menu"&gt;Item&lt;/span&gt;&lt;/a&gt;
                          &lt;ul aria-expanded="false" class="collapse"&gt;
                              &lt;li&gt;&lt;a href="~/Item/Index"&gt;Items&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="~/ItemCategories/Index"&gt;Item Category&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="~/ItemBrand/Index"&gt;Item Brands&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="~/ItemManufacture/Index"&gt;Item Manufacturer&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="~/Warehouse/Index"&gt;Warehouse&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a class="has-arrow waves-effect waves-dark" href="#" aria-expanded="false"&gt;&lt;i class="fa fa-shopping-cart"&gt;&lt;/i&gt;&lt;span class="hide-menu"&gt;Purchase Order&lt;/span&gt;&lt;/a&gt;
                          &lt;ul aria-expanded="false" class="collapse"&gt;
                              &lt;li&gt;
                                  &lt;a href="~/Purchase/Index"&gt;&lt;i class="fa fa-shopping-cart"&gt;&lt;/i&gt;Purchase Order&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li&gt;
                                  &lt;a href="~/Bill/Index"&gt;&lt;i class="fa fa-credit-card "&gt;&lt;/i&gt;Bill&lt;/a&gt;
                              &lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="~/SalesOrder/Index"&gt;&lt;i class="fa fa-line-chart"&gt;&lt;/i&gt;Sales Order&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;
                          &lt;a class="has-arrow waves-effect waves-dark" href="#" aria-expanded="false"&gt;&lt;i class="fa fa-user-plus"&gt;&lt;/i&gt;&lt;span class="hide-menu"&gt;Users&lt;/span&gt;&lt;/a&gt;
                          &lt;ul aria-expanded="false" class="collapse"&gt;
                              &lt;li&gt;&lt;a href="~/User/Index"&gt;Users&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a class="has-arrow waves-effect waves-dark" href="#" aria-expanded="false"&gt;&lt;i class="mdi mdi-view-grid"&gt;&lt;/i&gt;&lt;span class="hide-menu"&gt;Other&lt;/span&gt;&lt;/a&gt;
                          &lt;ul aria-expanded="false" class="collapse"&gt;
                              &lt;li&gt;&lt;a href="~/PermissionFunction/Index"&gt;Permission Function&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="~/PaymentMode/Index"&gt;Payment Mode&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="~/DocNoFormat/Index"&gt;Document Format&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="~/Unit/Index"&gt;Unit&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="~/Report/Index"&gt;&lt;i class="fa fa-line-chart"&gt;&lt;/i&gt;Report&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/nav&gt;
              &lt;!-- End Sidebar navigation --&gt;
          &lt;/div&gt;
          &lt;!-- End Sidebar scroll--&gt;
          &lt;!-- Bottom points--&gt;
          &lt;div class="sidebar-footer"&gt;
  
              &lt;a href="#" class="link" data-toggle="tooltip" title="Settings"&gt;&lt;i class="ti-settings"&gt;&lt;/i&gt;&lt;/a&gt;
  
              &lt;a href="#" class="link" data-toggle="tooltip" title="Email"&gt;&lt;i class="mdi mdi-gmail"&gt;&lt;/i&gt;&lt;/a&gt;
  
              &lt;a href="~/Account/Logout" class="link" data-toggle="tooltip" title="Logout"&gt;&lt;i class="mdi mdi-power"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;/div&gt;
      &lt;/aside&gt;
  </code></pre>