title: Bootstrap Accordion Expand/Collapse All not functioning properly
body: <p>Here's the process to break this:</p>
  
  <ol>
  <li>click Music Notation</li>
  <li>click Expand/Collapse All</li>
  <li>click Music Notation</li>
  <li>click Expand/Collapse All</li>
  <li>click Expand/Collapse All again</li>
  </ol>
  
  <p>Notice how Music Notation will NOT open back up, even though, you should be able to see in the function, that the logic says that ALL panels are closed and should open.  WHY?  What am I doing wrong?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;button class="btn btn-default btn-sm btn-exp" id="expandAllFormats"&gt;Expand/Collapse All&lt;/button&gt;
  &lt;div class="panel-group checkbox-group" id="accordionFormat" role="tablist" aria-multiselectable="true"&gt;
  
  &lt;div class="panel panel-default"&gt;
  &lt;div class="panel-heading" role="tab"&gt;
  &lt;h4 class="panel-title"&gt;
  &lt;a id="accordionformatText" role="button" data-toggle="collapse" data-parent="#accordionFormat" href="#formatText"&gt;
  &lt;i class="fa fa-chevron-circle-right" aria-hidden="true"&gt;&lt;/i&gt; Text
  &lt;/a&gt;
  &lt;/h4&gt;
  &lt;/div&gt;
  &lt;div id="formatText" class="panel-collapse collapse" role="tabpanel"&gt;
  &lt;div class="panel-body"&gt;ALPHA&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="panel panel-default"&gt;
  &lt;div class="panel-heading" role="tab"&gt;
  &lt;h4 class="panel-title"&gt;
  &lt;a id="accordionformatArt" class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionFormat" href="#formatArt"&gt;
  &lt;i class="fa fa-chevron-circle-right" aria-hidden="true"&gt;&lt;/i&gt; Art
  &lt;/a&gt;
  &lt;/h4&gt;
  &lt;/div&gt;
  &lt;div id="formatArt" class="panel-collapse collapse" aria-expanded="false" role="tabpanel"&gt;
  &lt;div class="panel-body"&gt;BETA&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="panel panel-default"&gt;
  &lt;div class="panel-heading" role="tab"&gt;
  &lt;h4 class="panel-title"&gt;
  &lt;a id="accordionformatAudio" class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionFormat" href="#formatAudio"&gt;
  &lt;i class="fa fa-chevron-circle-right" aria-hidden="true"&gt;&lt;/i&gt; Audio
  &lt;/a&gt;
  &lt;/h4&gt;
  &lt;/div&gt;
  &lt;div id="formatAudio" class="panel-collapse collapse" role="tabpanel"&gt;
  &lt;div class="panel-body"&gt;GAMMA&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="panel panel-default"&gt;
  &lt;div class="panel-heading" role="tab"&gt;
  &lt;h4 class="panel-title"&gt;
  &lt;a id="accordionformatNotation" class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionFormat" href="#formatNotation"&gt;
  &lt;i class="fa fa-chevron-circle-right" aria-hidden="true"&gt;&lt;/i&gt; Music Notation
  &lt;/a&gt;
  &lt;/h4&gt;
  &lt;/div&gt;
  &lt;div id="formatNotation" class="panel-collapse collapse" role="tabpanel"&gt;
  &lt;div class="panel-body"&gt;DELTA&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="panel panel-default"&gt;
  &lt;div class="panel-heading" role="tab"&gt;
  &lt;h4 class="panel-title"&gt;
  &lt;a id="accordionformatVideo" class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionFormat" href="#formatVideo"&gt;
  &lt;i class="fa fa-chevron-circle-right" aria-hidden="true"&gt;&lt;/i&gt; Video
  &lt;/a&gt;
  &lt;/h4&gt;
  &lt;/div&gt;
  &lt;div id="formatVideo" class="panel-collapse collapse" role="tabpanel"&gt;
  &lt;div class="panel-body"&gt;EPSILON&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="panel panel-default"&gt;
  &lt;div class="panel-heading" role="tab"&gt;
  &lt;h4 class="panel-title"&gt;
  &lt;a id="accordionformatInteractive" class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionFormat" href="#formatInteractive"&gt;
  &lt;i class="fa fa-chevron-circle-right" aria-hidden="true"&gt;&lt;/i&gt; Digital Interactive
  &lt;/a&gt;
  &lt;/h4&gt;
  &lt;/div&gt;
  &lt;div id="formatInteractive" class="panel-collapse collapse" role="tabpanel"&gt;
  &lt;div class="panel-body"&gt;ZETA&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>var toggleFormat = false;
  $('#expandAllFormats').on('click', function(e) {
          e.preventDefault();
          console.log(toggleFormat);
          $("#accordionFormat .panel-collapse").each(function(index, value){
              if (toggleFormat){
                  if($(this).hasClass('in')){
                      $(this).collapse('toggle');
                      console.log("This panel is open. it will be closed");
                  } else {
                      console.log("This panel is closed. it will stay closed");
                  }
              } else {
                  if(!$(this).hasClass('in')){
                      $(this).collapse('toggle');
                      console.log("This panel is closed. it will be open");
                  } else {
                      console.log("This panel is open. it will stay open");
                  }
              }
  
          });
          toggleFormat = toggleFormat ? false : true;
      });
  </code></pre>