Bootstrap 4 div with class collapse is open when page loads

Question

I have a series of nested collapsible items and for some reason the inner-most item is open on page load. It toggles correctly after that, but I can't figure out why it isn't starting out closed. Here is a codepen with the issue (the "brook trout" table is showing and should be hidden): https://codepen.io/xanabobana/pen/pobRxpx

HTML Code:

<div class="container-fluid">
    <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="row ml-4">
                                     <div class="col">
                                         <div class="collapse subCategories-show"><h5><a href="#table-show" class="table_carat" data-toggle="collapse"><i class="fa fa-plus-circle"></i></a> Brook Trout</h5>
                                         </div>
                                         <div class="collapse table-show">                      
                                             <div class="table-responsive">
                                                 <table id="studyTable" class="table table-striped" style="width:100%">
                                                   <thead>
                                                    <tr>
                                                    <th width="55">Show on Map</th>
                                                    <th>ID</th>
                                                    <th>Study</th>
                                                    <th>Indicator Categories</th>
                                                    <th>Years</th>
                                                    <th>Org</th>
                                                    <th>Protocols</th>
                                                    <th>Datasets</th>
                                                   </tr>
                                                 </thead>
                                               </table>
                                            </div>
                                          </div>
                                    </div>
                                  </div>
                                </div>
                                </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

js:

         $(".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(".table-show").slideToggle();

            $(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(".card").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>';
            }
          });        

question from:https://stackoverflow.com/questions/65849097/bootstrap-4-div-with-class-collapse-is-open-when-page-loads

Answer 1

I figured it out! There was an extra

$(this).closest(".card").find(".table-show").slideToggle();

inside of the $(".subcategory_carat").click(function(){