GevAlter GevAlter - 1 year ago 121
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="#{{ }}" aria-expanded="true" aria-controls="{{ }}">
{{ this.syntax }}
<div id="{{ }}" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="{{@index}}">
<div class="panel-body">
{{ this.answer }}

I use handlebars so here is the layout:

<!doctype html>
<html lang='en'>
<meta charset = 'UTF-8'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="/client/css/Site.css">
<script src=""></script>
<script src="" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="/client/js/site.js"></script>
<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>
{{{ body }}}

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) {

$('#accordion .in').collapse('hide');

transition = false;

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.