Submenu in navbar is collapsing after click on link

Question

I have a navbar on the left side of my web application with each item of the menu having an expandable submenu to navigate through the pages. Unfortunately, every time I click on one of the links of a submenu the new page is loaded, but the submenu is collapsed again. I would like to have the submenu still expanded after clicking one of its links.

Here is my code:

 <div class="container-fluid"> <div class="row"> <div class="col-md-3"> <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="nav-header panel panel-default"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"> <div class="panel-heading" role="tab" id="headingOne"> <h4 class="panel-title"> <span class="glyphicon glyphicon-th"></span>Cluster </h4> </div> </a> <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body"> <div class="nav-item"><span class="glyphicon glyphicon-eye-open"></span>@Html.ActionLink("overview", "ClusterAll", "Cluster", new { area = "" }, new { @class = "nav-item", style = "text-decoration:none;" })</div> <div class="nav-item"><span class="glyphicon glyphicon-plus"></span>@Html.ActionLink("create", "ClusterCreation", "Cluster", new { area = "" }, new { @class = "nav-item", style = "text-decoration:none;" })</div> <div class="nav-item"><span class="glyphicon glyphicon-pencil"></span>@Html.ActionLink("edit", "ClusterEdit", "Cluster", new { area = "" }, new { @class = "nav-item", style = "text-decoration:none;" })</div> </div> </div> </div> <div class="nav-header panel panel-default"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> <div class="panel-heading" role="tab" id="headingTwo"> <h4 class="panel-title"> <span class="glyphicon glyphicon-hdd"></span>Applications </h4> </div> </a> <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-body"> <div class="nav-item"><span class="glyphicon glyphicon-ok"></span>@Html.ActionLink("verify", "ApplicationPortfolioEdit", "Applications", new { area = "" }, new { @class = "nav-item", style = "text-decoration:none;" })</div> <div class="nav-item"><span class="glyphicon glyphicon-list-alt"></span>@Html.ActionLink("manage", "ApplicationMassEdit", "Applications", new { area = "" }, new { @class = "nav-item", style = "text-decoration:none;" })</div> </div> </div> </div> </div> </div> </div> </div> 

The actual menu has more items, this is just an example with 2 items to show you. Any ideas what I have to do to keep the submenus expanded after clicking on its links? I'm very new to web design, but I hope you can help me:)

Answer 1

If I get what you're trying to do you can pass the opened submenu as a # param in your url so when they do click a link to the new page you can have Javascript/jQuery read the # and open the proper submenu.

Something like this..

<a href="page.html#menuItemClicked">Applications</a>

And then with Javascript & jQuery we can read it with..

 $(document).ready(function() { hash = window.location.hash; $(hash).collapse('show'); }); 

We can use $(hash).collapse('show'); to show the content because you're using Bootstrap.

But this goes under the impression I understand what you're trying to say. :)