Bootstrap accordion: calling seperate functions on elements in both opening and closing cards

Question

I'm creating an accordion using BS4.

I've got a background image on each of the card headers that I want to hide when that card's body is open, and show when that card body is closed.

End goal is to show all images on closed cards, and hide image on the open card.

The entire accordion is created in forEach(); my IDs are using the indexes from that loop.

How do reliably call a function to hide the image for the card that's opening, whilst simultaneously calling a function to show an image on a card that's closing?

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

My current 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})
  })
});

Thank you all, I appreciate any and all guidance you're willing to offer.

Answer 1

Please check the codes bellow

HTML: I wrapped the img into a div with class .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;
}