Добавление "активного" класса для открытия элемента аккордеона Bootstrap

Я пробовал это решение:

Twitter bootstrap: добавление класса к открытому заголовку аккордеона

Но безрезультатно, может ли кто-нибудь сказать мне, что я здесь делаю неправильно?

Это аккордеон:

<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>

И тогда мой JS внизу:

<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>

Я действительно мало знаю о JS, поэтому любая помощь ценится!

Ответ 1

Если вы видите на этом скрипке, он определил одно правило css для

.active {
    background-color: Blue;   
}

В вашем случае вы успешно применяете класс css к элементу, но класс не определен. (Или вы не разместили его в вопросе)

Ответ 2

Это работает для меня:

$('.accordion-body').on('show',
  function(e){
    $(e.currentTarget).parent().find('.accordion-heading').addClass('active') 
  }
)

$('.accordion-body').on('hide',
  function(e){
    $(e.currentTarget).parent().find('.accordion-heading').removeClass('active') 
  }
)

Ответ 3

Чтобы достичь ожидаемого результата, используйте ниже вариант
1. Добавить событие клика в .accordion-toggle
1. Удалите активный класс из всех элементов с помощью класса - аккордеона
2. Проверьте флаг с расширенным расширением, если он истинен, а затем добавьте активный элемент с щелчком

    $(function() {
       $("a").on('click',function(){
         $('.accordion-toggle ').removeClass('active')

         if($(this).attr('aria-expanded')!== false){
             console.log('add');
                        $(this).addClass('active')
           }
        })
});

образец кода - https://codepen.io/nagasai/pen/pVNxWw