title: Bootstrap collapse not working (+ and - signs is not changing)
body: <p>I am using bootstrap classes for collapse. When I click on the + symbol, it is not changing to the - symbol.</p>
  
  <p>Here is my code. Please help me out.</p>
  
  <pre><code>var selectIds = $('#collapseOne1,#collapseTwo1');
  $(function ($) {
      selectIds.on('show.bs.collapse hidden.bs.collapse', function () {          
          $(this).prev().find('.fa').toggleClass('fa-minus fa-plus');
      })
  });
  
  &lt;div class="accordion" &gt;
      &lt;div class="panel-group" id="accordion1"&gt;
          &lt;div class="panel panel-default"&gt;
              &lt;div class="panel-heading"&gt;
                  &lt;h3 class="panel-title"&gt;
                      &lt;a id="submitid" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo1"&gt;
                          Submitted
                          &lt;i class="fa fa-plus pull-right"&gt;&lt;/i&gt;
                      &lt;/a&gt;
                  &lt;/h3&gt;
              &lt;/div&gt;
              &lt;div id="collapseTwo1" class="panel-collapse collapse"&gt;
                  &lt;div class="panel-body"&gt;
                      &lt;ul&gt;
                          @foreach(var item in ViewBag.consultant)      
                          {
                              &lt;li&gt;&lt;strong&gt;@item &lt;/strong&gt;&lt;/li&gt;
                          }
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="panel panel-default"&gt;
              &lt;div class="panel-heading active"&gt;
                  &lt;h3 class="panel-title"&gt;
                      &lt;a id="rejectid" class="accordion-toggle active" data-toggle="collapse" data-parent="#accordion1" href="#collapseOne1"&gt;
                          Rejected
                          &lt;i class="fa fa-minus pull-right"&gt;&lt;/i&gt;
                      &lt;/a&gt;
                  &lt;/h3&gt;
              &lt;/div&gt;
              &lt;div id="collapseOne1" class="panel-collapse in"&gt;
                  &lt;div class="panel-body"&gt;
                      &lt;div class="media accordion-inner"&gt;
                          &lt;div class="media-body"&gt;
                              &lt;ul&gt;
                                  @foreach(var item in ViewBag.consultant)      
                                  {
                                      &lt;li&gt;&lt;strong&gt;@item &lt;/strong&gt;&lt;/li&gt;
                                  }
  
                              &lt;/ul&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;     
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When I click on 'Submitted' the + symbol is still showing. Not changed to - symbol.</p>
  
  <pre><code>&lt;script src="~/js/jquery-ui-1.10.3.min.js"&gt;&lt;/script&gt;
  &lt;script src="~/js/jquery-ui-1.10.3.js"&gt;&lt;/script&gt;
  &lt;script src="~/Scripts/jquery-1.7.1.js"&gt;&lt;/script&gt;
  &lt;script src="~/Scripts/jquery.validate.js"&gt;&lt;/script&gt;
  &lt;script src="~/Scripts/jquery.validate.min.js"&gt;&lt;/script&gt;
  &lt;script src="~/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link href="~/css/font-awesome.min.css" rel="stylesheet" /&gt;
  &lt;link href="~/css/bootstrap.min.css" rel="stylesheet" /&gt;
  </code></pre>