<p dir="auto">Hello,</p>
<p dir="auto">straight to the point:</p>
<p dir="auto">To reproduce:</p>
<ol dir="auto">
<li>Go to Bootstrap website, collapse secition: <a href="http://twitter.github.io/bootstrap/javascript.html#collapse" rel="nofollow">link</a></li>
<li>Open up webdeveloper tools (I use Google Chrome), go to Console tab and execute: <code class="notranslate">$("#collapse .accordion-body:last").collapse("show");</code></li>
<li>Result: The last accordion opens, but the first isn't closed.</li>
</ol>
<p dir="auto">The problem (briefly):<br>
The third accordion doesn't have <code class="notranslate">parent</code> option set, because we didn't provide it.</p>
<p dir="auto">The workaround solution:<br>
Start the third accordion with parent option set, and after that try to <code class="notranslate">show()</code> it. Note, that <code class="notranslate">hide()</code> and <code class="notranslate">toggle()</code> also triggers this bug.</p>
<p dir="auto">The proper solution:<br>
Collapse constructor should look for <code class="notranslate">parent</code> setting (and all other too) in <code class="notranslate">data-</code> attributes of the <code class="notranslate">$()</code> element, as a fallback. If user doesn't provide these options, he obviously wants the Collapse to read those from <code class="notranslate">data-</code> attributes.</p>
<p dir="auto">The cry story:<br>
Wasted a couple of hours, why the accordion didn't work after <code class="notranslate">show()</code>. It's super counter intuitive, that the <code class="notranslate">options</code> aren't read from <code class="notranslate">data-</code> attributes, when you start the Collapse manual way. I suppose all other plugins inherit the same behaviour (starting by <code class="notranslate">data-</code> attributes reads <code class="notranslate">options</code> from these attributes, where starting manual way don't).</p>
<p dir="auto">Kind regards</p>
<p dir="auto">-------- Edit</p>
<p dir="auto">It's funny when you notice your own mistake only after you cry about it.</p>
<p dir="auto">Of course <code class="notranslate">accordion-body</code> doesn't have <code class="notranslate">data-</code> attributes to read from, so the <code class="notranslate">The proper solution</code> isn't quite working. But the problem remains. How do we mix the auto <code class="notranslate">data-</code> usage with the manual usage. I.e. how to achieve such a workflow:</p>
<ol dir="auto">
<li>Start the accordion/collapse through <code class="notranslate">data-</code> attributes.</li>
<li><code class="notranslate">open()</code>, <code class="notranslate">hide()</code>, <code class="notranslate">toggle()</code>, <code class="notranslate">whatever()</code> the accordion manually (occasionally) later on.</li>
</ol>
<p dir="auto">?</p>
<p dir="auto">-------- Edit</p>
<p dir="auto">Ok, it was quite easy: <code class="notranslate">$("#collapse .accordion-body:last").collapse({parent: "#accordion2"}, "show");</code>. But, can you see the notobviousleness of this solution? If I wanna <code class="notranslate">show()</code> an accordion, I don't wanna think to which <code class="notranslate">parent</code> it belongs, since I've already provided the information in the <code class="notranslate">accordion-toggle</code>. I just want the damn thing to show itself properly ;p. Also note the information duplication in this solution, which simply leads to maintenance hell in the future.</p>
<p dir="auto">Hello! I am using the latest version of Bootstrap from this repo to render a group of checkbox buttons very much like in the <a href="http://getbootstrap.com/javascript/#buttons" rel="nofollow">demo</a>.</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;div class=&quot;btn-group&quot; data-toggle=&quot;buttons&quot;&gt;
  &lt;label class=&quot;btn btn-primary active&quot;&gt;
    &lt;input type=&quot;checkbox&quot; checked&gt; Option 1 (pre-checked)
  &lt;/label&gt;
  &lt;label class=&quot;btn btn-primary&quot;&gt;
    &lt;input type=&quot;checkbox&quot;&gt; Option 2
  &lt;/label&gt;
  &lt;label class=&quot;btn btn-primary&quot;&gt;
    &lt;input type=&quot;checkbox&quot;&gt; Option 3
  &lt;/label&gt;
&lt;/div&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">btn-group</span>" <span class="pl-c1">data-toggle</span>="<span class="pl-s">buttons</span>"<span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">label</span> <span class="pl-c1">class</span>="<span class="pl-s">btn btn-primary active</span>"<span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">input</span> <span class="pl-c1">type</span>="<span class="pl-s">checkbox</span>" <span class="pl-c1">checked</span><span class="pl-kos">&gt;</span> Option 1 (pre-checked)
  <span class="pl-kos">&lt;/</span><span class="pl-ent">label</span><span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">label</span> <span class="pl-c1">class</span>="<span class="pl-s">btn btn-primary</span>"<span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">input</span> <span class="pl-c1">type</span>="<span class="pl-s">checkbox</span>"<span class="pl-kos">&gt;</span> Option 2
  <span class="pl-kos">&lt;/</span><span class="pl-ent">label</span><span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">label</span> <span class="pl-c1">class</span>="<span class="pl-s">btn btn-primary</span>"<span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">input</span> <span class="pl-c1">type</span>="<span class="pl-s">checkbox</span>"<span class="pl-kos">&gt;</span> Option 3
  <span class="pl-kos">&lt;/</span><span class="pl-ent">label</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">I've noticed a constantly reproducing issue. When I click on the checkbox button the actual input's <code class="notranslate">checked</code> DOM property <em>sometimes</em> is not being set correctly. That is I click on the button, the label changes it's state, BUT the firebug says that the input's DOM property was not changed. And firebug doe not lie, because when I submit the form the input value is incorrect.</p>
<p dir="auto">The issue can be easily reproduced <a href="http://jsbin.com/sabipice/3/edit" rel="nofollow">here</a>. Just trigger all the checkboxed from the first line (1,2,3,4,5,6) and then look their's 'checked' DOM property. One or two of them will have incorrect values.</p>
<p dir="auto">I've looked the source code and the problem is in this function</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="  Button.prototype.toggle = function () {
    var changed = true
    var $parent = this.$element.closest('[data-toggle=&quot;buttons&quot;]')

    if ($parent.length) {
      var $input = this.$element.find('input')
      if ($input.prop('type') == 'radio') {
        if ($input.prop('checked') &amp;&amp; this.$element.hasClass('active')) changed = false
        else $parent.find('.active').removeClass('active')
      }
      if (changed) $input.prop('checked', !this.$element.hasClass('active')).trigger('change')
    }

    if (changed) this.$element.toggleClass('active')
  }"><pre class="notranslate">  <span class="pl-v">Button</span><span class="pl-kos">.</span><span class="pl-c1">prototype</span><span class="pl-kos">.</span><span class="pl-en">toggle</span> <span class="pl-c1">=</span> <span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">var</span> <span class="pl-s1">changed</span> <span class="pl-c1">=</span> <span class="pl-c1">true</span>
    <span class="pl-k">var</span> <span class="pl-s1">$parent</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">$element</span><span class="pl-kos">.</span><span class="pl-en">closest</span><span class="pl-kos">(</span><span class="pl-s">'[data-toggle="buttons"]'</span><span class="pl-kos">)</span>

    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">$parent</span><span class="pl-kos">.</span><span class="pl-c1">length</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-k">var</span> <span class="pl-s1">$input</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">$element</span><span class="pl-kos">.</span><span class="pl-en">find</span><span class="pl-kos">(</span><span class="pl-s">'input'</span><span class="pl-kos">)</span>
      <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">$input</span><span class="pl-kos">.</span><span class="pl-en">prop</span><span class="pl-kos">(</span><span class="pl-s">'type'</span><span class="pl-kos">)</span> <span class="pl-c1">==</span> <span class="pl-s">'radio'</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">$input</span><span class="pl-kos">.</span><span class="pl-en">prop</span><span class="pl-kos">(</span><span class="pl-s">'checked'</span><span class="pl-kos">)</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">$element</span><span class="pl-kos">.</span><span class="pl-en">hasClass</span><span class="pl-kos">(</span><span class="pl-s">'active'</span><span class="pl-kos">)</span><span class="pl-kos">)</span> <span class="pl-s1">changed</span> <span class="pl-c1">=</span> <span class="pl-c1">false</span>
        <span class="pl-k">else</span> <span class="pl-s1">$parent</span><span class="pl-kos">.</span><span class="pl-en">find</span><span class="pl-kos">(</span><span class="pl-s">'.active'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">removeClass</span><span class="pl-kos">(</span><span class="pl-s">'active'</span><span class="pl-kos">)</span>
      <span class="pl-kos">}</span>
      <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">changed</span><span class="pl-kos">)</span> <span class="pl-s1">$input</span><span class="pl-kos">.</span><span class="pl-en">prop</span><span class="pl-kos">(</span><span class="pl-s">'checked'</span><span class="pl-kos">,</span> <span class="pl-c1">!</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">$element</span><span class="pl-kos">.</span><span class="pl-en">hasClass</span><span class="pl-kos">(</span><span class="pl-s">'active'</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">trigger</span><span class="pl-kos">(</span><span class="pl-s">'change'</span><span class="pl-kos">)</span>
    <span class="pl-kos">}</span>

    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">changed</span><span class="pl-kos">)</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">$element</span><span class="pl-kos">.</span><span class="pl-en">toggleClass</span><span class="pl-kos">(</span><span class="pl-s">'active'</span><span class="pl-kos">)</span>
  <span class="pl-kos">}</span></pre></div>
<p dir="auto">The</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="if (changed) $input.prop('checked', !this.$element.hasClass('active')).trigger('change')"><pre class="notranslate"><span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">changed</span><span class="pl-kos">)</span> <span class="pl-s1">$input</span><span class="pl-kos">.</span><span class="pl-en">prop</span><span class="pl-kos">(</span><span class="pl-s">'checked'</span><span class="pl-kos">,</span> <span class="pl-c1">!</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">$element</span><span class="pl-kos">.</span><span class="pl-en">hasClass</span><span class="pl-kos">(</span><span class="pl-s">'active'</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">trigger</span><span class="pl-kos">(</span><span class="pl-s">'change'</span><span class="pl-kos">)</span></pre></div>
<p dir="auto">line does not set the property for some reason. A very strange thing is that when I try to <code class="notranslate">console.log($input.prop('checked'))</code>  after this line, it logs a <em>correct</em> value.</p>
<p dir="auto">Any help is greatly appreciated.<br>
Thank you.</p>