Boot loading page
How can I make the accordion and sub-accordion open if I reload the page (by clicking one of the items)? I need to write my own function to keep open elements when they are opened on page reload or is this a possibility with inline javascript bootstrap.
<div id="MainMenu">
<div class="list-group">
<a href="#menu0" class="list-group-item" data-toggle="collapse" data-parent="#MainMenu">Holz</a>
<div id="menu0" class="collapse">
<a href="/products/index/11" class="list-group-subitem">A</a>
<a href="/products/index/12" class="list-group-subitem">B</a>
<a href="/products/index/13" class="list-group-subitem">C</a>
<a href="/products/index/14" class="list-group-subitem">D</a>
<a href="#menu0_1" class="list-group-subitem" data-toggle="collapse" data-parent="#MainMenu">E</a>
<div id="menu0_1" class="collapse">
<a href="/products/index/15" class="list-group-subitem">E1</a>
<a href="/products/index/16" class="list-group-subitem">E2</a>
</div>
</div>
</div>
+3
source to share
1 answer
You can use LocalStorage or cookies. Here's one example with LocalStorage:
$(document).ready(function () {
$('a').click(function() {
//store the id of the collapsible element
localStorage.setItem('collapseItem', $(this).attr('href'));
});
var collapseItem = localStorage.getItem('collapseItem');
if (collapseItem) {
$(collapseItem).collapse('show')
}
})
To improve your code, you can use bootstrap collapse events: http://getbootstrap.com/javascript/#collapse-usage , for example:
$('#myCollapsible').on('show.bs.collapse', function () {
// store the id of the collapsible element
//....
})
The same strategy can be used with cookies: https://github.com/carhartl/jquery-cookie
+3
source to share