GevAlter GevAlter - 3 months ago 24
jQuery Question

twitter bootstrap accordion bug

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');
}
});
});

Answer

Try adding only the .collapse class to your according element(s) in the html. Also you should not need to handle the show and hide events.