twitter bootstrap accordion bug

Question

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

Riaan van Zyl · Accepted Answer · 2016-08-29T12:57:20.410

1

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.

edited Aug 29 '16 at 12:57

answered Aug 29 '16 at 12:02

Riaan van Zyl

448
6
15

1

on what elements? i tried all the panel and only the body and both are not helping only making it worse – GevAlter Aug 29 '16 at 12:44
2

nvm, i think that you ment to change the collapse in to just collapse and it worked.. thanks man! – GevAlter Aug 29 '16 at 12:47

score 1 · Answer 2 · answered Dec 15 '17 at 14:26

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:

$acc.find('.collapse').collapse({
    parent: $acc, // to make it work as accordion
    toggle: false // don't toggle while initialising
});

check the snippet for more details.

I hope it helped somebody

$(function(){
 var tabIndex = 0;

 var $acc = $('#accordion');
 const tabsCount = $acc.find('.collapse').length;

 // IF SKIP JS INITIALISATION - SHOW METHOD WILL NOT CLOSE OTHER TABS (UNLESS THEY'RE ALREADY INITIALIZED WITH MANUAL CLICKS)
 $acc.find('.collapse').collapse({
  parent: $acc, // to make it work as accordion
  toggle: false // don't toggle while initializing
 });

 $('#openNextTabBtn').on('click', function(){
  $acc.find('.collapse').eq(++tabIndex % tabsCount).collapse('show');
 });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div>
    <span class="btn btn-default" id="openNextTabBtn">Open Next Tab</span>
</div>

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingOne">
            <h4 class="panel-title">
                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                    Collapsible Group Item #1
                </a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
            <div class="panel-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingTwo">
            <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                    Collapsible Group Item #2
                </a>
            </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
            <div class="panel-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingThree">
            <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                    Collapsible Group Item #3
                </a>
            </h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
            <div class="panel-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
            </div>
        </div>
    </div>
</div>

twitter bootstrap accordion bug

2 Answers2