Adding 'active' class to open Bootstrap accordion item

Question

I have tried this solution:

Twitter bootstrap: adding a class to the open accordion title

But to no avail, can someone tell me what I'm doing wrong here?

This is the accordion:

<div class="accordion" id="accordion">
    <div class="accordion-group">
        <div class="accordion-heading">
            <div class="row-fluid">
                <div class="span5">
                    <img src="img/smartlist/user-icon.png" class="user"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion"
                    href="#collapseOne">Austin Wang</a>

                </div>
                <div class="span7">
                    <img class="envelope" src="img/smartlist/envelope.png"> <a href="#">Seller Drip</a>

                    <img class="new" src="img/smartlist/new-icon.png"> <a href="#">New</a>

                    <img class="messages" src="img/smartlist/bubbles.png"> <a href="#">8 Days</a>

                    <img class="accordion-action pull-right" src="img/smartlist/plus-box.png"
                    data-toggle="collapse" data-target="#collapseOne">
                </div>
            </div>
        </div>
        <div id="collapseOne" class="accordion-body collapse">
            <div class="accordion-inner">
                <div class="row-fluid">
                    <div class="span12 top-links"> <a href="#" class="active">Email Template</a>
 <a href="#">Home Price Evaluation Offer</a>

                    </div>
                </div>
                <div class="arrow-up"></div>
                <div class="row-fluid grey-body">
                    <div class="span12">
                        <label>Subject</label>
                        <input type="text" class="text-field">
                        <label>Body</label>
                        <textarea rows="10"></textarea>
                        <div class="buttons">
                            <div class="form">
                                <button type="submit" class="send-button">Send</button> <a href="#" class="call">Call</a>
 <a href="#" class="skip">Skip</a>

                            </div>
                            <div class="pull-right radio">
                                <input type="radio">
                                <label>BCC Me</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

And then my JS at the bottom:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/less-1.3.3.min.js" type="text/javascript"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
<script type="text/javascript">
$(".collapse").collapse()   
</script>
<script type="text/javascript">
$(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');
});

});
</script>

I really don't know much about JS, so any help is appreciated!

Answer 1

If you see in that fiddle, he has defined one css rule for

.active {
    background-color: Blue;   
}

In your case, you are successfully applying the css class to the element, but the class is not defined. (Or you haven't posted it in the question)