Iam working on a C# MVC project. It works perfectly until today i e across a problem.
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.
i found this Question : But it didn't help me, as in the answer said i tried adding javascript
$(document).ready(function () {
$('.sidebartoggler').collapse('toggle');
})
but i e across an error Uncaught Error: Collapse is transitioning.
Here is my layout header code :
<header class="topbar">
<nav class="navbar top-navbar navbar-toggleable-sm navbar-light">
<!-- ============================================================== -->
<!-- Logo -->
....// code
<div class="navbar-collapse">
<!-- ============================================================== -->
<!-- toggle and nav items -->
<!-- ============================================================== -->
<ul class="navbar-nav mr-auto mt-md-0">
<!-- This is -->
<li class="nav-item"> <a class="nav-link nav-toggler hidden-md-up text-muted waves-effect waves-dark" href="javascript:void(0)"><i class="mdi mdi-menu"></i></a> </li>
<li class="nav-item"> <a class="nav-link sidebartoggler hidden-sm-down text-muted waves-effect waves-dark" href="javascript:void(0)" id="sidebartoggler"><i class="ti-menu"></i></a> </li>
<!-- ============================================================== -->
<!-- Search -->
....// code
<!-- Messages -->
....// code
</ul>
<!-- ============================================================== -->
<!-- User profile and search -->
<!-- ============================================================== -->
<ul class="navbar-nav my-lg-0">
<!-- ============================================================== -->
<!-- Comment -->
....// code
<!-- ============================================================== -->
<!-- Messages -->
....// code
<!-- ============================================================== -->
<!-- Language -->
....// code
</ul>
</div>
</nav>
</header>
This is how it looks like:
What i need in page load is something like :
UPDATE
My sidebar code
<aside class="left-sidebar">
<div class="scroll-sidebar">
<div class="user-profile">
<div class="profile-text">
<div class="dropdown-menu animated flipInY">
<a href="~/Company/Index" class="dropdown-item"><i class="ti-user"></i> Company</a>
<a href="#" class="dropdown-item"><i class="ti-user"></i> My Profile</a>
<a href="#" class="dropdown-item"><i class="ti-wallet"></i> My Balance</a>
<a href="#" class="dropdown-item"><i class="ti-email"></i> Inbox</a>
<div class="dropdown-divider"></div> <a href="#" class="dropdown-item"><i class="ti-settings"></i> Account Setting</a>
<div class="dropdown-divider"></div> <a href="~/Account/Logout" class="dropdown-item"><i class="fa fa-power-off"></i> Logout</a>
</div>
</div>
</div>
<nav class="sidebar-nav">
<ul id="sidebarnav">
<li><a href="~/Company/_CompanyDetails"><i class="fa fa-home"></i>Company</a></li>
<li>
<a class="has-arrow waves-effect waves-dark" href="#" aria-expanded="false"><i class="mdi mdi-gauge"></i><span class="hide-menu">Admin Tables </span></a>
<ul aria-expanded="false" class="collapse">
<li><a href="~/Countries/Index">Countries</a></li>
<li><a href="~/State/Index">State</a></li>
<li><a href="~/Tax/Index">Tax</a></li>
<li><a href="~/Role/Index">Roles</a></li>
<li><a href="~/Branch/Index">Branches</a></li>
</ul>
</li>
<li>
<a class="has-arrow waves-effect waves-dark" href="#" aria-expanded="false"><i class="fa fa-group"></i><span class="hide-menu">Contacts</span></a>
<ul aria-expanded="false" class="collapse">
<li><a href="~/Customer/Index">Customers</a></li>
<li><a href="~/Customer/ProspectFollowup">Prospect Followup</a></li>
</ul>
</li>
<li>
<a class="has-arrow waves-effect waves-dark" href="#" aria-expanded="false"><i class="fa fa-cart-plus"></i><span class="hide-menu">Item</span></a>
<ul aria-expanded="false" class="collapse">
<li><a href="~/Item/Index">Items</a></li>
<li><a href="~/ItemCategories/Index">Item Category</a></li>
<li><a href="~/ItemBrand/Index">Item Brands</a></li>
<li><a href="~/ItemManufacture/Index">Item Manufacturer</a></li>
<li><a href="~/Warehouse/Index">Warehouse</a></li>
</ul>
</li>
<li>
<a class="has-arrow waves-effect waves-dark" href="#" aria-expanded="false"><i class="fa fa-shopping-cart"></i><span class="hide-menu">Purchase Order</span></a>
<ul aria-expanded="false" class="collapse">
<li>
<a href="~/Purchase/Index"><i class="fa fa-shopping-cart"></i>Purchase Order</a>
</li>
<li>
<a href="~/Bill/Index"><i class="fa fa-credit-card "></i>Bill</a>
</li>
</ul>
</li>
<li><a href="~/SalesOrder/Index"><i class="fa fa-line-chart"></i>Sales Order</a></li>
<li>
<a class="has-arrow waves-effect waves-dark" href="#" aria-expanded="false"><i class="fa fa-user-plus"></i><span class="hide-menu">Users</span></a>
<ul aria-expanded="false" class="collapse">
<li><a href="~/User/Index">Users</a></li>
</ul>
</li>
<li>
<a class="has-arrow waves-effect waves-dark" href="#" aria-expanded="false"><i class="mdi mdi-view-grid"></i><span class="hide-menu">Other</span></a>
<ul aria-expanded="false" class="collapse">
<li><a href="~/PermissionFunction/Index">Permission Function</a></li>
<li><a href="~/PaymentMode/Index">Payment Mode</a></li>
<li><a href="~/DocNoFormat/Index">Document Format</a></li>
<li><a href="~/Unit/Index">Unit</a></li>
</ul>
</li>
<li><a href="~/Report/Index"><i class="fa fa-line-chart"></i>Report</a></li>
</ul>
</nav>
<!-- End Sidebar navigation -->
</div>
<!-- End Sidebar scroll-->
<!-- Bottom points-->
<div class="sidebar-footer">
<a href="#" class="link" data-toggle="tooltip" title="Settings"><i class="ti-settings"></i></a>
<a href="#" class="link" data-toggle="tooltip" title="Email"><i class="mdi mdi-gmail"></i></a>
<a href="~/Account/Logout" class="link" data-toggle="tooltip" title="Logout"><i class="mdi mdi-power"></i></a>
</div>
</aside>
Iam working on a C# MVC project. It works perfectly until today i e across a problem.
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.
i found this Question : But it didn't help me, as in the answer said i tried adding javascript
$(document).ready(function () {
$('.sidebartoggler').collapse('toggle');
})
but i e across an error Uncaught Error: Collapse is transitioning.
Here is my layout header code :
<header class="topbar">
<nav class="navbar top-navbar navbar-toggleable-sm navbar-light">
<!-- ============================================================== -->
<!-- Logo -->
....// code
<div class="navbar-collapse">
<!-- ============================================================== -->
<!-- toggle and nav items -->
<!-- ============================================================== -->
<ul class="navbar-nav mr-auto mt-md-0">
<!-- This is -->
<li class="nav-item"> <a class="nav-link nav-toggler hidden-md-up text-muted waves-effect waves-dark" href="javascript:void(0)"><i class="mdi mdi-menu"></i></a> </li>
<li class="nav-item"> <a class="nav-link sidebartoggler hidden-sm-down text-muted waves-effect waves-dark" href="javascript:void(0)" id="sidebartoggler"><i class="ti-menu"></i></a> </li>
<!-- ============================================================== -->
<!-- Search -->
....// code
<!-- Messages -->
....// code
</ul>
<!-- ============================================================== -->
<!-- User profile and search -->
<!-- ============================================================== -->
<ul class="navbar-nav my-lg-0">
<!-- ============================================================== -->
<!-- Comment -->
....// code
<!-- ============================================================== -->
<!-- Messages -->
....// code
<!-- ============================================================== -->
<!-- Language -->
....// code
</ul>
</div>
</nav>
</header>
This is how it looks like:
What i need in page load is something like :
UPDATE
My sidebar code
<aside class="left-sidebar">
<div class="scroll-sidebar">
<div class="user-profile">
<div class="profile-text">
<div class="dropdown-menu animated flipInY">
<a href="~/Company/Index" class="dropdown-item"><i class="ti-user"></i> Company</a>
<a href="#" class="dropdown-item"><i class="ti-user"></i> My Profile</a>
<a href="#" class="dropdown-item"><i class="ti-wallet"></i> My Balance</a>
<a href="#" class="dropdown-item"><i class="ti-email"></i> Inbox</a>
<div class="dropdown-divider"></div> <a href="#" class="dropdown-item"><i class="ti-settings"></i> Account Setting</a>
<div class="dropdown-divider"></div> <a href="~/Account/Logout" class="dropdown-item"><i class="fa fa-power-off"></i> Logout</a>
</div>
</div>
</div>
<nav class="sidebar-nav">
<ul id="sidebarnav">
<li><a href="~/Company/_CompanyDetails"><i class="fa fa-home"></i>Company</a></li>
<li>
<a class="has-arrow waves-effect waves-dark" href="#" aria-expanded="false"><i class="mdi mdi-gauge"></i><span class="hide-menu">Admin Tables </span></a>
<ul aria-expanded="false" class="collapse">
<li><a href="~/Countries/Index">Countries</a></li>
<li><a href="~/State/Index">State</a></li>
<li><a href="~/Tax/Index">Tax</a></li>
<li><a href="~/Role/Index">Roles</a></li>
<li><a href="~/Branch/Index">Branches</a></li>
</ul>
</li>
<li>
<a class="has-arrow waves-effect waves-dark" href="#" aria-expanded="false"><i class="fa fa-group"></i><span class="hide-menu">Contacts</span></a>
<ul aria-expanded="false" class="collapse">
<li><a href="~/Customer/Index">Customers</a></li>
<li><a href="~/Customer/ProspectFollowup">Prospect Followup</a></li>
</ul>
</li>
<li>
<a class="has-arrow waves-effect waves-dark" href="#" aria-expanded="false"><i class="fa fa-cart-plus"></i><span class="hide-menu">Item</span></a>
<ul aria-expanded="false" class="collapse">
<li><a href="~/Item/Index">Items</a></li>
<li><a href="~/ItemCategories/Index">Item Category</a></li>
<li><a href="~/ItemBrand/Index">Item Brands</a></li>
<li><a href="~/ItemManufacture/Index">Item Manufacturer</a></li>
<li><a href="~/Warehouse/Index">Warehouse</a></li>
</ul>
</li>
<li>
<a class="has-arrow waves-effect waves-dark" href="#" aria-expanded="false"><i class="fa fa-shopping-cart"></i><span class="hide-menu">Purchase Order</span></a>
<ul aria-expanded="false" class="collapse">
<li>
<a href="~/Purchase/Index"><i class="fa fa-shopping-cart"></i>Purchase Order</a>
</li>
<li>
<a href="~/Bill/Index"><i class="fa fa-credit-card "></i>Bill</a>
</li>
</ul>
</li>
<li><a href="~/SalesOrder/Index"><i class="fa fa-line-chart"></i>Sales Order</a></li>
<li>
<a class="has-arrow waves-effect waves-dark" href="#" aria-expanded="false"><i class="fa fa-user-plus"></i><span class="hide-menu">Users</span></a>
<ul aria-expanded="false" class="collapse">
<li><a href="~/User/Index">Users</a></li>
</ul>
</li>
<li>
<a class="has-arrow waves-effect waves-dark" href="#" aria-expanded="false"><i class="mdi mdi-view-grid"></i><span class="hide-menu">Other</span></a>
<ul aria-expanded="false" class="collapse">
<li><a href="~/PermissionFunction/Index">Permission Function</a></li>
<li><a href="~/PaymentMode/Index">Payment Mode</a></li>
<li><a href="~/DocNoFormat/Index">Document Format</a></li>
<li><a href="~/Unit/Index">Unit</a></li>
</ul>
</li>
<li><a href="~/Report/Index"><i class="fa fa-line-chart"></i>Report</a></li>
</ul>
</nav>
<!-- End Sidebar navigation -->
</div>
<!-- End Sidebar scroll-->
<!-- Bottom points-->
<div class="sidebar-footer">
<a href="#" class="link" data-toggle="tooltip" title="Settings"><i class="ti-settings"></i></a>
<a href="#" class="link" data-toggle="tooltip" title="Email"><i class="mdi mdi-gmail"></i></a>
<a href="~/Account/Logout" class="link" data-toggle="tooltip" title="Logout"><i class="mdi mdi-power"></i></a>
</div>
</aside>
- Would be helpful to see the markup of the sidebar as well. – Tieson T. Commented Aug 17, 2017 at 9:13
- Updated my code – user6448640 Commented Aug 17, 2017 at 9:17
-
If you're using the collapse plugin, the element normally needs the
collapseclass. This "hides" the element, and then the toggle method adds theinclass, which then "shows" the element. Have you tried that? – Tieson T. Commented Aug 17, 2017 at 9:25 - i dont know how to do that – user6448640 Commented Aug 17, 2017 at 9:28
- That's what the docs are for (I specifically linked to the collapse documentation). Try reviewing them. You might also find this useful: blog.codeply./2016/05/18/… – Tieson T. Commented Aug 17, 2017 at 9:30
5 Answers
Reset to default 1So, if clicking works on your sidebartoggler button, you can simply click it using code.
like here:
$(document).ready(function () {
$('#sidebartoggler').click();
});
Add toggled along with the Navbar class
<nav class="toggled navbar navbar-dark.....
it seems you put . selector for sidebartoggler, it should be # since it is an id selector not a class selector;
$(document).ready(function () {
$('#sidebartoggler').collapse('toggle');
})
More Info
Please try this one
<div class="collapse navbar-collapse">
add collapse class
You can use "data-toggle" and "data-target" properties of the bootstrap to achieve this functionality.
This is main toggle button:
<button type="button" class="btn btn-info collapsed" data-toggle="collapse" data-target="#demo" aria-expanded="false">Simple collapsible</button>
Below is div which you want to toggle:
<div id="demo" class="collapse" aria-expanded="false" style="height: 0px;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea modo consequat.
</div>
So you just to need add 'toggle' class to your side bar div. and make sure that it doesn't contain 'in' class which means it is in expand state.