jquery - Bootstrap 4 Expand All / Collapse All button doesn't work when collapse element already showing

Question

I made an Expand All / Collapse All button that works on the initial page load. However, if I expand "manually" one of the divs then it remains open and doesn't respond to the "Collapse All" button.

To recreate the issue:

1. Click Wildlife->Mammal Biodiversity->Brook Trout to view the Brook Trout table
2. Click the link Expand All to see all tables
3. Click Collapse All and the Brook Trout table stays open

I made a codepen with the issue here: https://codepen.io/xanabobana/pen/pobRxpx

My HTML:

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12 text-right">
            <a id="expand-all" href="javascript:void(0);">Expand All</a>
        </div>
    </div>  
    <div class="row">
        <div class="col">
                <div class="card mb-3">
                  <div class="card-header justify-content-between d-flex align-items-center text-white bg-info">
                      <h4>Wildlife</h4>
                      <a class="category_carat"><i class="fa fa-caret-right"></i></a>                  
                  </div>
                  <div class="card-body">
                        <div class="row">
                                <div class="col-md order-2 order-md-1 mt-4 mt-md-0">                                                                        
                                    <div class="collapse categories-show">
                                          <div class="row">
                                              <div class="col-md order-2 order-md-1 mt-4 mt-md-0">
                                                      <h5 class="card-title"><a href="#subCategories-show" class="subcategory_carat" data-toggle="collapse"><i class="fa fa-plus-circle"></i></a> Mammal Biodiversity</h5>                          
                                              </div>
                                           </div>                                                                                                        
                                           <div class="find-table">
                                                 <div class="row ml-4">
                                                      <div class="col">
                                                             <div class="collapse subCategories-show">
                                                                  <h5><a href="#table-show" class="table_carat" data-toggle="collapse" value="Brook Trout"><i class="fa fa-plus-circle"></i></a> Brook Trout</h5>
                                                             </div>
                                                       </div>
                                                  </div>
                                                  <div class="row ml-4">
                                                      <div class="col">
                                                                <div class="collapse table-show">                       
                                                                        <div class="table-responsive">
                                                                            <table id="studyTableBrookTrout" class="table table-striped study-table" value="Brook Trout" style="width:100%">
                                                                            <thead>
                                                                                <tr>
                                                                                    <th>ID</th>
                                                                                    <th>Study</th>
                                                                                    <th>Indicator Categories</th>
                                                                                    <th>Years</th>
                                                                                    <th>Org</th>

                                                                                </tr>
                                                                            </thead>
                                                                        </table>
                                                                     </div>
                                                                </div>
                                                           </div>
                                                     </div>
                                               </div>                                                                                                        
                                               <div class="find-table">
                                                        <div class="row ml-4">
                                                            <div class="col">
                                                                <div class="collapse subCategories-show">
                                                                      <h5><a href="#table-show" class="table_carat" data-toggle="collapse" value="Moose Population"><i class="fa fa-plus-circle"></i></a> Moose Population</h5>
                                                                 </div>
                                                            </div>
                                                        </div>
                                                        <div class="row ml-4">
                                                             <div class="col">
                                                                <div class="collapse table-show">                       
                                                                        <div class="table-responsive">
                                                                            <table id="studyTableMoosePopulation" class="table table-striped study-table" value="Moose Population" style="width:100%">
                                                                            <thead>
                                                                                <tr>
                                                                                    <th>ID</th>
                                                                                    <th>Study</th>
                                                                                    <th>Indicator Categories</th>
                                                                                    <th>Years</th>
                                                                                    <th>Org</th>

                                                                                </tr>
                                                                            </thead>
                                                                        </table>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                         </div>
                                                      </div>                                                                                                      
                                                      <div class="find-table">
                                                         <div class="row ml-4">
                                                             <div class="col">
                                                                <div class="collapse subCategories-show">
                                                                    <h5><a href="#table-show" class="table_carat" data-toggle="collapse" value="Little Northern Squirrel"><i class="fa fa-plus-circle"></i></a> Little Northern Squirrel</h5>
                                                                </div>
                                                            </div>
                                                        </div>
                                                         <div class="row ml-4">
                                                             <div class="col">
                                                                <div class="collapse table-show">                       
                                                                        <div class="table-responsive">
                                                                            <table id="studyTableLittleNorthernSquirrel" class="table table-striped study-table" value="Little Northern Squirrel" style="width:100%">
                                                                            <thead>
                                                                                <tr>
                                                                                    <th>ID</th>
                                                                                    <th>Study</th>
                                                                                    <th>Indicator Categories</th>
                                                                                    <th>Years</th>
                                                                                    <th>Org</th>

                                                                                </tr>
                                                                            </thead>
                                                                        </table>
                                                                     </div>
                                                                </div>
                                                           </div>
                                                      </div>
                                                 </div>
                                             </div>
                                         </div>

Answer 1

In your code you are using slideToggle() this will add css display:none or display:block to your element so even if you use removeClass("show") that style is still there in your elements . So, you can use .hide() or .show() whenever your collapse all link is clicked.

Demo Code :

//show or collapse all
$("#expand-all").on("click", function(e) {
  if (this.text === "Expand All") {
    this.text = "Collapse All";

    $(".collapse").each(function() {
      if (!$(this).hasClass("show")) {
        $(this).addClass("show");
      }

      $(".category_carat").each(function() {
        this.innerHTML = '<i class="fa fa-caret-down"></i>';
      });
      $(".subcategory_carat").each(function() {
        this.innerHTML = '<i class="fa fa-minus-circle"></i>';
      });
      $(".table_carat").each(function() {
      //show all tables...
        $(this).closest(".find-table").find(".table-show").show()
        this.innerHTML = '<i class="fa fa-minus-circle"></i>';
      });
    });
  } else {
    this.text = "Expand All";
    $(".collapse").each(function() {
      if ($(this).hasClass("show")) {
        $(this).removeClass("show")
      }

      $(".category_carat").each(function() {
        this.innerHTML = '<i class="fa fa-caret-right"></i>';
      });
      $(".subcategory_carat").each(function() {
        this.innerHTML = '<i class="fa fa-plus-circle"></i>';
      });
      $(".table_carat").each(function() {
      //hide all tables...
        $(this).closest(".find-table").find(".table-show").hide()
        this.innerHTML = '<i class="fa fa-plus-circle"></i>';
      });
    });
  }
});

//show or collapse categories

$(".category_carat").click(function() {
  $(this).closest(".card").find(".categories-show").slideToggle();
  //console.log($(this).closest(".card").find(".show-cat"));
  if (this.innerHTML === '<i class="fa fa-caret-down"></i>') {
    this.innerHTML = '<i class="fa fa-caret-right"></i>';
  } else {
    this.innerHTML = '<i class="fa fa-caret-down"></i>';
  }
});

$(".subcategory_carat").click(function() {
  $(this).closest(".card").find(".subCategories-show").slideToggle();

  if (this.innerHTML === '<i class="fa fa-plus-circle"></i>') {
    this.innerHTML = '<i class="fa fa-minus-circle"></i>';
  } else {
    this.innerHTML = '<i class="fa fa-plus-circle"></i>';
  }
});

$(".table_carat").click(function() {
  $(this).closest(".find-table").find(".table-show").slideToggle();

  if (this.innerHTML === '<i class="fa fa-plus-circle"></i>') {
    this.innerHTML = '<i class="fa fa-minus-circle"></i>';
  } else {
    this.innerHTML = '<i class="fa fa-plus-circle"></i>';
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js">
</script>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-12 text-right"><a id="expand-all" href="javascript:void(0);">Expand All</a></div>
  </div>

  <div class="row">
    <div class="col">
      <div class="card mb-3">
        <div class="card-header justify-content-between d-flex align-items-center text-white bg-info">
          <h4>Wildlife</h4>
          <a class="category_carat"><i class="fa fa-caret-right"></i></a>
        </div>
        <div class="card-body">
          <div class="row">
            <div class="col-md order-2 order-md-1 mt-4 mt-md-0">

              <div class="collapse categories-show">

                <div class="row">
                  <div class="col-md order-2 order-md-1 mt-4 mt-md-0">
                    <h5 class="card-title"> <a href="#subCategories-show" class="subcategory_carat" data-toggle="collapse"><i class="fa fa-plus-circle"></i></a> Mammal Biodiversity</h5>
                  </div>
                </div>
                <div class="find-table">
                  <div class="row ml-4">
                    <div class="col">
                      <div class="collapse  subCategories-show">
                        <h5><a href="#table-show" class="table_carat" data-toggle="collapse" value="Brook Trout"><i class="fa fa-plus-circle"></i></a> Brook Trout</h5>
                      </div>
                    </div>
                  </div>
                  <div class="row ml-4">
                    <div class="col">
                      <div class="collapse  table-show">
                        <div class="table-responsive">
                          <table id="studyTableBrookTrout" class="table table-striped study-table" value="Brook Trout" style="width:100%">
                            <thead>
                              <tr>
                                <th>ID</th>
                                <th>Study</th>
                                <th>Indicator Categories</th>
                                <th>Years</th>
                                <th>Org</th>

                              </tr>
                            </thead>
                          </table>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="find-table">
                  <div class="row ml-4">
                    <div class="col">
                      <div class="collapse subCategories-show">
                        <h5><a href="#table-show" class="table_carat" data-toggle="collapse" value="Moose Population"><i class="fa fa-plus-circle"></i></a> Moose Population</h5>
                      </div>
                    </div>
                  </div>
                  <div class="row ml-4">
                    <div class="col">
                      <div class="collapse table-show">
                        <div class="table-responsive">
                          <table id="studyTableMoosePopulation" class="table table-striped study-table" value="Moose Population" style="width:100%">
                            <thead>
                              <tr>
                                <th>ID</th>
                                <th>Study</th>
                                <th>Indicator Categories</th>
                                <th>Years</th>
                                <th>Org</th>

                              </tr>
                            </thead>
                          </table>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="find-table">
                  <div class="row ml-4">
                    <div class="col">
                      <div class="collapse subCategories-show">
                        <h5><a href="#table-show" class="table_carat" data-toggle="collapse" value="Little Northern Squirrel"><i class="fa fa-plus-circle"></i></a> Little Northern Squirrel</h5>
                      </div>
                    </div>
                  </div>
                  <div class="row ml-4">
                    <div class="col">
                      <div class="collapse table-show">
                        <div class="table-responsive">
                          <table id="studyTableLittleNorthernSquirrel" class="table table-striped study-table" value="Little Northern Squirrel" style="width:100%">
                            <thead>
                              <tr>
                                <th>ID</th>
                                <th>Study</th>
                                <th>Indicator Categories</th>
                                <th>Years</th>
                                <th>Org</th>

                              </tr>
                            </thead>
                          </table>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>