Bootstrap accordion not collapsing after another is selected

问题

Anyone, please help! I facing a problem while using jquery on bootstrap. It seems like an accordion is not working correctly, bootstrap accordion not collapsing after another is selected.

But when it comes not performing well if there are few cards for click. And previous open card is not close even selected other card to open. There's something happen: If continue click for open each card, the previous open card will still showing - and not + and it's showing content which is not what I want. Can anyone help me to have a look at the code and tell anything that I can fix the problem or there's better code? thanks!

My layout:

<div class="container">
  <div id="accordion">
    <div class="card info-card' . $i . '" data-toggle="collapse"
         href="#collapse' . $i . '">
      <div class="card-header">
        <h4 style="margin:0;"><strong>' . $title . '</strong>
          <div class="icon">
            <img class="plus-icon"
                 src="'.get_stylesheet_directory_uri().'/img/plus.png"
                 alt="plus-icon"/>
          </div>
          <img class="minus-icon" style="display:none"
               src="'.get_stylesheet_directory_uri().'/img/minus.png"
               alt="minus-icon"/></span>
        </h4>
      </div>
      <div id="collapse' . $i . '" class="collapse" data-parent="#accordion">
        <a class="card-link">
          <span class="icon"></span>
        </a>
        <div class="card-body">
          '. $content .'
        </div>
      </div>
    </div>
  </div>
</div>

My script:

$(document).ready(function () {
  $('.card').on('click', function () {
    $('.minus-icon').hide();
    $('.plus-icon').show();
    $(this).find('.card-header').css('background-color', '#ececec37');
    if ($(this).find('.collapse').hasClass('show')) {
      $(this).find('.card-header').css('background-color', '#ececec37');
      $(this).find('.plus-icon').show();
      $(this).find('.minus-icon').hide();
    } else {
      $(this).find('.card-header').css('background-color', 'white');
      $(this).find('.plus-icon').hide();
      $(this).find('.minus-icon').show();
    }
  });
});

I will thankful for anyone that willing to help me on this cuz I'm super new on coding, thanks!

Update:

I just solved the issue by my own, hope this can help anyone facing same issue like me:

        $('.card').on('click', function(){
    $('.minus-icon').hide();
    $('.plus-icon').show();
    $(this).find('.card-header').css("background-color","#ececec37");
            if($(this).find('.collapse').hasClass('show')){
      $(this).find('.card-header').css("background-color","#ececec37");
      $(this).find('.plus-icon').show();
      $(this).find('.minus-icon').hide();
      $(this).find('.card-body').hide();

            }else{
      if($('.collapse')!= $(this).find('.collapse')){
      $('.collapse').removeClass('show');
      $('.card-header').css("background-color","#ececec37");

    }else{
      $('.collapse').hasClass('show');
      $(this).find('.card-header').css("background-color","#ececec37");
    }

    $(this).find('.card-header').css("background-color","white");
      $(this).find('.plus-icon').hide();
      $(this).find('.minus-icon').show();
      $(this).find('.card-body').show();
            }

回答1:

actually you can achieve this functionality with bootstrap as well. you need to add one id in the parent of all accordions. In my example I have used id="accordionGroup" and on each accordion add data-parent="#accordionGroup" on the div that has class="collapse". Hope this will solve your problem. And for plus/minus icon don't need to add jQuery, you can do that with css. check this codepen example, click here

html:

<div class="container"> <h1>Sample accordion</h1> <div id="accordionGroup"> <button type="button" class="btn btn-primary btn-block mb-2 text-left" data-toggle="collapse" data-target="#demo">Accordion 1</button> <div id="demo" class="collapse" data-parent="#accordionGroup"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> <button type="button" class="btn btn-primary btn-block text-left" data-toggle="collapse" data-target="#demo1">Accordion 2</button> <div id="demo1" class="collapse" data-parent="#accordionGroup"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> </div> </div>

来源：https://stackoverflow.com/questions/61788057/bootstrap-accordion-not-collapsing-after-another-is-selected