GevAlter GevAlter - 1 year ago 159
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 Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download