Jquery can't close div on click again

I am trying to close a div by clicking a button with SlideUp function. But when I click on button it opens as expected and closes other divs. But doesn't close it re-opens itself.

Here is my html code

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

and here is the Jquery codes:

<script>
    $(".opener").click(function(){
    $(".all-row").find(".card-wrapper").slideUp();
    $(this).closest(".card-wrapper").slideToggle(); 
    
    })
</script>

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>