title: Adding 'active' class to open Bootstrap accordion item
body: <p>I have tried this solution: </p>
  
  <p><a href="https://stackoverflow.com/questions/10918801/twitter-bootstrap-adding-a-class-to-the-open-accordion-title">Twitter bootstrap: adding a class to the open accordion title</a></p>
  
  <p>But to no avail, can someone tell me what I'm doing wrong here? </p>
  
  <p>This is the accordion: </p>
  
  <pre><code>&lt;div class="accordion" id="accordion"&gt;
      &lt;div class="accordion-group"&gt;
          &lt;div class="accordion-heading"&gt;
              &lt;div class="row-fluid"&gt;
                  &lt;div class="span5"&gt;
                      &lt;img src="img/smartlist/user-icon.png" class="user"&gt; &lt;a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion"
                      href="#collapseOne"&gt;Austin Wang&lt;/a&gt;
  
                  &lt;/div&gt;
                  &lt;div class="span7"&gt;
                      &lt;img class="envelope" src="img/smartlist/envelope.png"&gt; &lt;a href="#"&gt;Seller Drip&lt;/a&gt;
  
                      &lt;img class="new" src="img/smartlist/new-icon.png"&gt; &lt;a href="#"&gt;New&lt;/a&gt;
  
                      &lt;img class="messages" src="img/smartlist/bubbles.png"&gt; &lt;a href="#"&gt;8 Days&lt;/a&gt;
  
                      &lt;img class="accordion-action pull-right" src="img/smartlist/plus-box.png"
                      data-toggle="collapse" data-target="#collapseOne"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="collapseOne" class="accordion-body collapse"&gt;
              &lt;div class="accordion-inner"&gt;
                  &lt;div class="row-fluid"&gt;
                      &lt;div class="span12 top-links"&gt; &lt;a href="#" class="active"&gt;Email Template&lt;/a&gt;
   &lt;a href="#"&gt;Home Price Evaluation Offer&lt;/a&gt;
  
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="arrow-up"&gt;&lt;/div&gt;
                  &lt;div class="row-fluid grey-body"&gt;
                      &lt;div class="span12"&gt;
                          &lt;label&gt;Subject&lt;/label&gt;
                          &lt;input type="text" class="text-field"&gt;
                          &lt;label&gt;Body&lt;/label&gt;
                          &lt;textarea rows="10"&gt;&lt;/textarea&gt;
                          &lt;div class="buttons"&gt;
                              &lt;div class="form"&gt;
                                  &lt;button type="submit" class="send-button"&gt;Send&lt;/button&gt; &lt;a href="#" class="call"&gt;Call&lt;/a&gt;
   &lt;a href="#" class="skip"&gt;Skip&lt;/a&gt;
  
                              &lt;/div&gt;
                              &lt;div class="pull-right radio"&gt;
                                  &lt;input type="radio"&gt;
                                  &lt;label&gt;BCC Me&lt;/label&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>And then my JS at the bottom:</p>
  
  <pre><code>&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/less-1.3.3.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="js/bootstrap.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $(".collapse").collapse()   
  &lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $(function() {
  
  $('.accordion-body').on('show', function (e) {
       $(e.target).prev('.accordion-heading').find('.accordion-toggle').addClass('active');
  });
  
  $('.accordion-body').on('hide', function (e) {
      $(this).find('.accordion-toggle').not($(e.target)).removeClass('active');
  });
  
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>I really don't know much about JS, so any help is appreciated!</p>