0

I'm using this official bootstrap dashboard template. By clicking a subitem in the dropdown in the sidebar the clicked webpage is being loaded but because of the fact that every html page has its own (the same) sidebar, the dropdown menu is closed. I solved this issue by adding the "collapse in" parameter to the subpages' sidebars. It works fine, but it also leads to the problem that a click on the dropdownmenu reopens the dropown list although it's already open. So you have to click to two times to close it.

Does anyone know how to solve this issue or is there a better way which fits my requirements?

Thank you!

The following code describes the beginning of the sidebar of subpage1:

<div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav side-nav">
                <li>
                    <a href="index.html"><i class="fa fa-fw fa-dashboard"></i> Dashboard</a>
                </li>
                <li class="active">
                    <a href="javascript:;" data-toggle="collapse" data-target="#item1"> Item A<i class="fa fa-fw fa-caret-down"></i></a>
                    <ul id="subitems" class="collapse in">
                        <li class="active">
                            <a href="#">SubItem1</a>
                        </li>
                        <li>
                            <a href="#">SubItem2</a>
                        </li>
Dave
  • 95
  • 1
  • 10

1 Answers1

0

Since you are navigating between pages you could stor the state of the dropdown in sessionStorage or localStorage

$(".subitems").on('shown.bs.collapse', function(){
        // Save in sessionStorage here
});
$(".subitems").on('hidden.bs.collapse', function(){
        // Save in sessionStorage here
});

and use javascript when the page is loaded to expand the dropdowns that was previously expanded. For example

$('.subitems').collapse("show");
Paul Lernmark
  • 581
  • 1
  • 6
  • 17