title: How to close all collapsible divs (accordions) when the modal is dismissed or closed?
body: <p>I have developed a modal containing three collapsible divs. When i dismiss the modal and open it again the active collapsible divs are still open. I'd rather want all open collapsibles to be closed except the div with "panel-collapse collapse in" class when the modal gets closed. </p>
  
  <p>PS- I am using Bootstrap 3.</p>
  
  <pre><code>&lt;div class="modal fade" id="myModal" role="dialog"&gt;
  &lt;div class="modal-dialog"&gt;
  
    &lt;!-- Modal content--&gt;
    &lt;div class="modal-content"&gt;
      &lt;div class="modal-header"&gt;
        &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
        &lt;h4 id="modal-title"&gt; &lt;/h4&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
        &lt;div class="panel-group" id="accordion"&gt;
                      &lt;div class="panel panel-primary"&gt;
                          &lt;div  class="panel-heading"&gt;
                              &lt;h4 class="panel-title"&gt;
                              &lt;a data-toggle="collapse" data-parent="#accordion" href="#collapse1"&gt;Course Introduction
  
                              &lt;span class="pull-right"&gt;&lt;i id="icon0" class="fa fa-plus open" aria-hidden="true"&gt;&lt;/i&gt;&lt;/span&gt;
                              &lt;/a&gt;
  
                              &lt;/h4&gt;
                          &lt;/div&gt;
  
                          &lt;div id="collapse1" class="panel-collapse collapse in"&gt;
                              &lt;div class="panel-body"&gt;
                              &lt;p&gt; abc abc abc &lt;/p&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
  
                      &lt;div class="panel "&gt;
                          &lt;div class="panel-heading"&gt;
                              &lt;h4 class="panel-title"&gt;
                              &lt;a data-toggle="collapse" data-parent="#accordion" href="#collapse2"&gt;Description
                              &lt;span class="pull-right"&gt;&lt;i id="icon" class="fa fa-plus" aria-hidden="true"&gt;&lt;/i&gt;&lt;/span&gt;&lt;/a&gt;
                              &lt;/h4&gt;
                          &lt;/div&gt;
  
                          &lt;div id="collapse2" class="panel-collapse collapse"&gt;
                              &lt;div class="panel-body"&gt;
                              &lt;p&gt;Lorem ipsum dolor sit amet, &lt;/p&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;div class="panel"&gt;
                          &lt;div class="panel-heading"&gt;
                              &lt;h4 class="panel-title"&gt;
                              &lt;a data-toggle="collapse" data-parent="#accordion" href="#collapse3"&gt;Goals
                              &lt;span class="pull-right"&gt;&lt;i id="icon" class="fa fa-plus" aria-hidden="true"&gt;&lt;/i&gt;&lt;/span&gt;&lt;/a&gt;
                              &lt;/h4&gt;
                          &lt;/div&gt;
  
                          &lt;div id="collapse3" class="panel-collapse collapse"&gt;
                              &lt;div class="panel-body"&gt;
                              &lt;p&gt;Lorem ipsum dolor sit amet,&lt;/p&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
  
  
                  &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="modal-footer"&gt;
        &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p></p>