After Two Clicks Both Divs Are Hidden Using Toggle JQuery

Contents hide

1 After two clicks both divs are hidden using toggle jQuery

Problem Description:

In a Bootstrap card I have added two card-body and a button which on click it hides one of them.

The expected behavior is every time user clicks on the button card 11111 appears and 2222 card disappears. If button is clicked again 2222 appears and 11111 card disappear etc…

I have coded the following, which in the second click hides both divs completely… What am I missing here?

$(".toggle-executed").on('click', function(e) {

  $(this).closest(".card-body").slideToggle('slow', function() {
    $(this).closest(".card-body").toggleClass("d-none");
  });


  $(this).closest(".card-body").siblings(".card-body").toggleClass("d-none");

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/css/bootstrap.min.css" rel="stylesheet" />


<div class="col-12 my-3">
  <div class="card border-left-success">

    <div class="card-body action-info">
      <div class="row align-items-center">
        <div class="col-11">
          <div class="row">
            1111
          </div>
        </div>
        <div class="col-1 mx-auto text-center">
          <button class="btn btn-primary toggle-executed">btn</button>
        </div>
      </div>
    </div>

    <div class="card-body executed-info d-none">
      <div class="row align-items-center">
        <div class="col-11">
          <div class="row">
            2222
          </div>
        </div>
        <div class="col-1 mx-auto text-center">
          <button class="btn btn-primary toggle-executed">btn</button>
        </div>
      </div>
    </div>

  </div>
</div>

Solution – 1

Your issue is that slideToggle('slow' applies display:none directly to the element, not using the d-none class.

So when you click the btn2, btn1 does have the class d-none removed, but is still display:none on the element, so doesn’t show.

If you want to keep .slideToggle then you can add .show() after adding d-none – it won’t show because of the d-none, but will remove the display:none applied by the slideToggle:

$(this).closest(".card-body").toggleClass("d-none").show();

As a bonus, if you use appendTo to move the element to the end of the parent, then they will "cycle" visually correctly, but depends on your requirement.

$(".toggle-executed").on('click', function(e) {

  $(this).closest(".card-body").slideToggle('slow', function() {
    var cardbody = $(this).closest(".card-body")
    cardbody.toggleClass("d-none").show();
    cardbody.appendTo(cardbody.parent())
  });


  $(this).closest(".card-body").siblings(".card-body").toggleClass("d-none");

});

.d-none {
  displain: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/css/bootstrap.min.css" rel="stylesheet" />


<div class="col-12 my-3">
  <div class="card border-left-success">

    <div class="card-body action-info">
      <div class="row align-items-center">
        <div class="col-11">
          <div class="row">
            1111
          </div>
        </div>
        <div class="col-1 mx-auto text-center">
          <button class="btn btn-primary toggle-executed">btn</button>
        </div>
      </div>
    </div>

    <div class="card-body executed-info d-none">
      <div class="row align-items-center">
        <div class="col-11">
          <div class="row">
            2222
          </div>
        </div>
        <div class="col-1 mx-auto text-center">
          <button class="btn btn-primary toggle-executed">btn</button>
        </div>
      </div>
    </div>

  </div>
</div>

Rate this post