Bootstrap accordion: вызов отдельных функций на элементах как в открывающих, так и в закрывающих картах

Question

Я создаю аккордеон, используя BS4.

У меня есть фоновое изображение на каждом из заголовков карт, которое я хочу скрыть, когда тело этой карты открыто, и показать, когда тело этой карты закрыто.

Конечная цель - показать все изображения на закрытых карточках и скрыть изображения на открытой карточке.

Весь аккордеон создан в forEach(); мои идентификаторы используют индексы из этого цикла.

Как надежно вызвать функцию, чтобы скрыть изображение открывающейся карты, одновременно вызывая функцию для отображения изображения на закрывающей карточке?

Мой текущий HTML:

<div id="accordion">
    <div class="card">

        <!-- the img I want to toggle opacity on: -->
        <img class="card-img center-cropped" id="cardHeaderBG'+ index +'" src="'+ item.cover_big +'"> </img>

        <div class="card-header card-img-overlay" id="heading' + index + '">' +
            <button class="btn btn-link collapsed" id="wrapper" data-toggle="collapse" data-target="#collapse' + index + '">
            ... content ...
            </button>
        </div>
        <div id="collapse' + index + '" class="collapse" aria-labelledby="heading' + index + '" data-parent="#accordion">
            <div class="card-body">
                ... content ...
            </div>
        </div>
    </div>
</div>

Мой текущий JS:

$(function() {
  $(".collapse").on('show.bs.collapse', function(e) {
    $(this).siblings("img").animate({opacity: 0})

  })
});


$(function() {
  $(".collapse").on('hide.bs.collapse', function(e) {
    $(this).siblings("img").animate({opacity: 1})
  })
});

Спасибо всем, я ценю любые рекомендации, которые вы готовы предложить.

Answer 1

Пожалуйста, проверьте коды ниже

HTML: я обернул img в div с классом .img

<div id="accordion">
    <div class="card">

        <!-- the img I want to toggle opacity on: -->
        <div class="img"><img class="card-img center-cropped" id="cardHeaderBG'+ index +'" src="'+ item.cover_big +'"></div>

        <div class="card-header card-img-overlay" id="heading' + index + '">' +
            <button class="btn btn-link collapsed" id="wrapper" data-toggle="collapse" data-target="#collapse' + index + '">
            ... content ...
            </button>
        </div>
        <div id="collapse' + index + '" class="collapse" aria-labelledby="heading' + index + '" data-parent="#accordion">
            <div class="card-body">
                ... content ...
            </div>
        </div>
    </div>
</div>

JS:

$('.collapse').each(function() {
  var targetColls = $(this);

  targetColls.on('hide.bs.collapse', function () { 
    $(this).closest('.card').find('.img').addClass('img-show');
  });

  targetColls.on('show.bs.collapse', function () {
    $(this).closest('.card').find('.img-show').removeClass('img-show');
  });
});

CSS:

.card .img {
  position: relative;
  height: 0;
  overflow: hidden;
  transition: height .35s ease;
}

.img-show {
  height: auto;
}