Как выполнить анимацию после открытия коллапс (аккордеона)?

Question

[Anna Arteeva]

Тривиальная задача для владеющих JS, но, к сожалению, я в нем не сильна.
У меня есть прогресс бар, который анимируется постепенно по мере прокрутки страницы. Вот такой invious.html.themeforest.createit.pl/features-p-ba...
Я же его вставила в элемент collapse, аккардеон по-русски, поэтому он показывается только после его разворачивания и анимация не видна. Как изменить запрос так, чтобы анимация воспроизводилась только после открытия Родительского коллапса (именно родительского, так как их несколько)
Вот скрипт, видимо менять нужно первую строку

if (jQuery().appear && jQuery("body").hasClass("cssAnimate")) {
            jQuery('.progress').appear(function () {
                var $this = jQuery(this);
                $this.each(function () {
                    var $innerbar = $this.find(".progress-bar");
                    var percentage = $innerbar.attr("data-percentage");
                    $innerbar.addClass("animating").css("width", percentage + "%");

                    $innerbar.on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', function () {
                        $innerbar.find(".pull-right").fadeIn(900);
                    });

                });
            }, {accY: -100});
        } else {
            jQuery('.progress').each(function () {
                var $this = jQuery(this);
                var $innerbar = $this.find(".progress-bar");
                var percentage = $innerbar.attr("data-percentage");
                $innerbar.addClass("animating").css("width", percentage + "%");

                $innerbar.on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', function () {
                    $innerbar.find(".pull-right").fadeIn(900);
                });

            });
        }

Вот код коллапса при нажатии у него появляется класс .in (class="collapse in"). Это стандарт из Бутсрапа.

<a class="list-group-item" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample"></a>
<div class="collapse" id="collapseExample"></a>

Answer 1

[Иван Соболев]

Во-первых, сломана верстка

<div class="collapse" id="collapseExample"></a>

Во-вторых, где сам прогресс-бар? Вынесите его из невидимого блока

<div class="ВАШАККАРДЕОН"></div>
<div class="ВАШПРОГРЕССБАР"></div>

С таким описанием проблемы больше вам тут нечем помочь... вы же дизайнер, лучше наймите разработчика - не мучайте себя.

Answer 2

[Anna Arteeva]

Да, копировала в два приема и кусок потеряла :-)
С версткой проблем нет, работает нормально, когда аккордеона нет, анимация видна, значит тоже работает.

<a class="list-group-item" role="button" data-toggle="collapse" href="#equipment" aria-expanded="false" aria-controls="equipment">Экипировка</a>
<div class="collapse" id="equipment">
<div class="ct-progressBar">
      <div class="ct-progressBar-content">
            <div class="progress">
                  <div class="progress-bar animating" role="progressbar" data-percentage="85" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"></div>
             </div>
      </div>
</div>
</div>

Когда нажимаем на < a >, становится
<div class="collapse in" id="equipment">. Я думаю отсюда можно отталкиваться. По-русски можно сказать так "Если .collapse.in=true, то включаем анимацию". Как это на JS сказать, я затрудняюсь.