Adding 'active' class to open Bootstrap accordion item
<p>I have tried this solution: </p>

<p><a href="http://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? </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 JS, so any help is appreciated! </p>
