jQuery AddClass/RemoveClass/Attr Isn't Working

Question

There is a nearby location on the property listing page. I want to show is collapsed on the page load. I tried add/removeclass and attr but didn't work.

Theme dynamically removes " in " to collapseFive class + " collapsed " to panel-title class

Original code, not collapsed

<div class="panel-wrapper yelp_wrapper">
                <a class="panel-title" id="yelp_details" data-toggle="collapse" data-parent="#yelp_details" href="#collapseFive"><span class="panel-title-arrow"></span>Yakınlarda Neler Var</a>
                <div id="collapseFive" class="panel-collapse collapse in">

Original code, collapsed

<div class="panel-wrapper yelp_wrapper">
                <a class="panel-title collapsed" id="yelp_details" data-toggle="collapse" data-parent="#yelp_details" href="#collapseFive" aria-expanded="false"><span class="panel-title-arrow"></span>Yakınlarda Neler Var</a>
                <div id="collapseFive" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">

Add class

$(document).ready(function(){
    $("#yelp_details").addClass("collapsed");
});

Remove class

$(document).ready(function(){
    $("#collapseFive").removeClass("in");
});

Attr

    $(document).ready(function(){
    $("#collapseFive").attr("class", "panel-collapse collapse");
});

Answer 1

I assume this is a boostrap collapse. If that's right, you need to use:

.collapse('show') : hows a collapsible element.

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script> <div class="panel-wrapper yelp_wrapper"> <a class="panel-title" id="yelp_details" data-toggle="collapse" data-parent="#yelp_details" href="#collapseFive"><span class="panel-title-arrow"></span>Yakınlarda Neler Var</a> <script> $(function () { $('#collapseFive').collapse('show'); }); </script> <div id="collapseFive" class="panel-collapse collapse in"> <div class="well"> 1 2 3 4 </div> </div> </div>