Search code examples
jquerytwitter-bootstraphandlebars.jsbootstrap-accordion

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

  • 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.