CODEWITHSUNDEEP
javascriptjquery
emretosunkaya
emretosunkaya

Reputation: 385

jQuery AddClass/RemoveClass/Attr Isn't Working

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");
});

Upvotes: 1

Views: 195

Answers (1)

gaetanoM
gaetanoM

Reputation: 42054

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/[email protected]/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>

Upvotes: 1

Related Questions