Question posted in 
i having a hard time to get my mistake for the last few hours.. i use bootstrap accordion and handlebars template engine – and it works with my DB values as it should.
The problem is when you first load the page all the tabs are open.. they all close when i close and re-open one of them. here is the page code:
<div class="panel-group" style="margin: 1%" id="accordion" role="tablist" aria-multiselectable="true">
{{# each questions }}
<div class="panel panel-primary">
<div class="panel-heading" role="tab" id="{{@index}}">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#{{ this.id }}" aria-expanded="true" aria-controls="{{ this.id }}">
{{ this.syntax }}
</a>
</h4>
</div>
<div id="{{ this.id }}" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="{{@index}}">
<div class="panel-body">
{{ this.answer }}
</div>
</div>
</div>
{{/each}}
</div>
I use handlebars so here is the layout:
<!doctype html>
<html lang='en'>
<head>
<meta charset = 'UTF-8'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="/client/css/Site.css">
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="/client/js/site.js"></script>
</head>
<body>
<ul class="topnav">
<li><a class="active" href="/">NANO-DEV</a><li>
<li><a href="/questions">Questions</a></li>
<li class="right"><a href="#about">About</a></li>
</ul>
{{{ body }}}
</body>
</html>
I tried following this stack case so i added this code to my js file but it wont help..
$(function() {
var transition = false;
var $active = true;
$('.panel-title > a').click(function(e) {
e.preventDefault();
});
$('#accordion').on('show.bs.collapse',function(){
if($active){
$('#accordion .in').collapse('hide');
}
});
$('#accordion').on('hidden.bs.collapse',function(){
if(transition){
transition = false;
$('.panel-collapse').collapse('show');
}
});
});
2
Answers
Try adding only the
.collapseclass to your according element(s) in the html.Also you should not need to handle the show and hide events.
Faced same issue – all sections were open on .collapse call. +another interesting bug (below).
But solution was found.
I had correct HTML markup (and it worked fine) with no JS at first. But then I wanted to switch sections programmatically. When I call .collapse(‘show’) on some section – other sections appeared unsynchronised (some left open), even on manual clicks. The trick here is to mandatory initialise plugin with .collapse() call. So to avoid all sections expanded (and make them controllable programmatically with no problems) you must provide both options like this:
check the snippet for more details.
I hope it helped somebody