Jquery can’t close div on click again

Question

You use .closest(), which finds the closest matching parent. But what you need is .prev() because the element you want to target is the previous sibling… Not it’s parent.

Additionnaly, you should remove this targeted element form the “all” .card-wrapper collection, using .not()

$(".opener").click(function() {

  // The card previous to the clicked .card-opener anchor
  var this_card = $(this).prev(".card-wrapper")

  // Make sure all cards closes EXCEPT this one
  $(".all-row").find(".card-wrapper").not(this_card).slideUp();
  
  // Toggle this one
  this_card.slideToggle();

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>


<div class="row all-row">
  <div class="col-lg-4">
    <div class="main-acc">
      <div class="brand-wrapper">
        <img src="img.png" alt="">
        <h5 class="p-3">Lorem</h5>
        <div class="card-wrapper">
          <div class="card border-0 text-center">
            <h5>Ipsunlore</h5>
            <p>
              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius unde est ut consequatur error amet eligendi vero aut assumenda.
            </p>
            <a href="#" class="">Find</a>
          </div>
        </div>
        <a class="btn d-flex justify-content-between align-items-center opener" href="#">
          <h5 class="m-0">Lorem</h5>
          <i class="fa fa-chevron-up pl-3"></i>
        </a>
      </div>
    </div>
  </div>
  <div class="col-lg-4">
    <div class="main-acc">
      <div class="brand-wrapper">
        <img src="image.jpg" alt="">
        <h5 class="p-3">Lorem</h5>
        <div class="card-wrapper">
          <div class="card border-0 text-center">
            <h5>Mister: Ipsun</h5>
            <p>
              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius unde est ut consequatur error amet eligendi vero aut assumenda.
            </p>
            <a href="#" class="">From</a>
          </div>
        </div>
        <a class="btn d-flex justify-content-between align-items-center opener" href="#">
          <h5 class="m-0">Lorem</h5>
          <i class="fa fa-chevron-up pl-3"></i>
        </a>
      </div>
    </div>
  </div>
</div>

Leave a Comment Cancel Reply