title: Collapse called twice inside accordion template
body: <p>All works except for collapsing the Bootstrap collapsible outside of this example on stackoverflow, I would appreciate some suggestions.</p>
  
  <p>When <code>any opened item</code> is <code>clicked</code> to <code>collapse</code>, its class changes in the following sequence: <code>panel-collapse collapse in</code> > <code>panel-collapse collapsing</code> > <code>panel-collapse collapse in</code>. In the right sequence it should result in <code>panel-collapse collapse collapsed</code>. This is <strong>not yet solved</strong>. The problem is that <code>collapse</code> is called twice.</p>
  
  <p>What would solution for this so I can use it as part of template?</p>
  
  <p><strong>UPDATE:</strong> Only one <code>panel-group</code> to be opened exclusively. This is now <strong>solved</strong> by removing the <code>data-parent</code>, it now allows multiple panels to be opened simultaneously.</p>
  
  <p>I added logging in <code>bootstrap.js</code> (lines 608-628):</p>
  
  <pre><code>  // COLLAPSE DATA-API
    // =================
  
    $(document).on('click.bs.collapse.data-api', '[data-toggle=collapse]', function (e) {
      var $this   = $(this), href
      var target  = $this.attr('data-target')
          || e.preventDefault()
          || (href = $this.attr('href')) &amp;&amp; href.replace(/.*(?=#[^\s]+$)/, '') //strip for ie7
      var $target = $(target)
      var data    = $target.data('bs.collapse')
      var option  = data ? 'toggle' : $this.data()
      var parent  = $this.attr('data-parent')
      var $parent = parent &amp;&amp; $(parent)
  
      console.log("A",data);
      if (!data || !data.transitioning) {console.log("B1");
        if ($parent) { console.log("B2");
            $parent.find('[data-toggle=collapse][data-parent="' + parent + '"]').not($this).addClass('collapsed')
        }
        console.log("B3",$target.hasClass('in'));
        $this[$target.hasClass('in') ? 'addClass' : 'removeClass']('collapsed')
      }
      console.log("C", option);
      $target.collapse(option)
      console.log("D");
    })
  </code></pre>
  
  <p>The resulting log:</p>
  
  <p>a) When <code>collapse</code> is pressed first time, it looks messed up</p>
  
  <pre><code>bootstrap.js:622 A undefined
  bootstrap.js:623 B1
  bootstrap.js:624 B2
  bootstrap.js:627 B3 false
  bootstrap.js:630 C Object {toggle: "collapse", bind: "text:displayLabel, attr:{href:idhash}"}
  bootstrap.js:632 D
  bootstrap.js:622 A Collapse {$element: jQuery.fn.jQuery.init[1], options: Object, transitioning: 1}
  bootstrap.js:630 C toggle
  bootstrap.js:632 D
  </code></pre>
  
  <p>b) When <code>collapse</code> is pressed any other time</p>
  
  <pre><code>bootstrap.js:622 A Collapse {$element: x.fn.x.init[1], options: Object, transitioning: 0}
  bootstrap.js:623 B1
  bootstrap.js:624 B2
  bootstrap.js:627 B3 true
  bootstrap.js:630 C toggle
  bootstrap.js:632 D
  bootstrap.js:622 A Collapse {$element: jQuery.fn.jQuery.init[1], options: Object, transitioning: 1}
  bootstrap.js:630 C toggle
  bootstrap.js:632 D
  </code></pre>
  
  <p>The correct output should be:</p>
  
  <p>a) When <code>collapse</code> is pressed first time</p>
  
  <pre><code>bootstrap.js:622 A undefined
  bootstrap.js:623 B1
  bootstrap.js:624 B2
  bootstrap.js:627 B3 false
  bootstrap.js:630 C Object {toggle: "collapse", bind: "text:displayLabel, attr:{href:idhash}"}
  bootstrap.js:632 D
  </code></pre>
  
  <p>b) When <code>collapse</code> is pressed any other time</p>
  
  <pre><code>bootstrap.js:622 A Collapse {$element: jQuery.fn.jQuery.init[1], options: Object, transitioning: 0}
  bootstrap.js:623 B1
  bootstrap.js:624 B2
  bootstrap.js:627 B3 (true or false)
  bootstrap.js:630 C toggle
  bootstrap.js:632 D
  </code></pre>
  
  <p>The full code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var confItems = {};
  var childrenLength = 2;
  confItems["children"] = new Array(childrenLength);
  for (var i = 0; i &lt; childrenLength; i++) {
    confItems.children[i] = {};
    confItems.children[i]["idhash"] = "#col-" + (i + 1);
    confItems.children[i]["id"] = "col-" + (i + 1);
    confItems.children[i]["displayLabel"] = "Item " + (i + 1);
    confItems.children[i]["children"] = new Array(childrenLength);
    for (var j = 0; j &lt; childrenLength; j++) {
      confItems.children[i].children[j] = {};
      confItems.children[i]["idhash"] = "#col-" + (i + 1) + "-" + (j + 1);
      confItems.children[i]["id"] = "col-" + (i + 1) + "-" + (j + 1);
      confItems.children[i].children[j]["displayLabel"] = "Item " + (i + 1) + "." + (j + 1);
      confItems.children[i].children[j]["children"] = new Array(0);
    }
  }
  var viewModel = function() {
    this.tree = ko.observable(confItems);
  };
  ko.applyBindings(new viewModel());</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"&gt;
  &lt;link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css"&gt;
  &lt;script src="https://code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;
  &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"&gt;&lt;/script&gt;
  &lt;div data-bind="template: {name:'largeTemplate', data: tree}"&gt;&lt;/div&gt;
  &lt;script id='largeTemplate' type='text/html'&gt;
    &lt;div class="panel-group"&gt;
   &lt;div id="accordion" class="panel panel-default" data-bind="foreach: children"&gt;
        &lt;div class="panel-heading"&gt;
          &lt;h4 class="panel-title"&gt;
     &lt;a data-toggle="collapse" data-parent="#accordion" data-bind="text:displayLabel, attr:{href:idhash}"&gt;Lorem&lt;/a&gt;
    &lt;/h4&gt;
        &lt;/div&gt;
        &lt;div data-bind="attr:{id:id}" class="panel-collapse collapse"&gt;
          &lt;div class="panel-body" data-bind="foreach: children"&gt;
            &lt;div class="panel-heading"&gt;
              &lt;a data-bind="text:displayLabel"&gt;Donec&lt;/a&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>