Bootstrap card collapse not working properly - html

Question

I am using a bootstrap collapse functionality to show/hide some statistics, opens like a charm, but when closing, it does no animation and the arrow does not turn back down. What am I missing?
<div class="columna">
<section class="stadisticCard">
<div class="card chart-card">
<div class="card-body pb-0">
<h5 class="card-title font-weight-bold">Amount of food wasted each season in Spain</h5>
<p class="card-text float-left">Spanish Government • 2020</p>
<div class="float-right">
<button class="botonExpandir collapsed" type="button" data-toggle="collapse" data-target="#multiCollapseExample1" aria-expanded="false" aria-controls="multiCollapseExample1">
<i class="bi bi-arrow-up-circle"></i>
</button>
</div>
</div>
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="card-body">
<ul class="nav nav-tabs nav-fill mb-3" id="pills-tab1" role="tablist">
<li class="nav-item ms-0" role="presentation">
<a class="linkStadisticas nav-link active" id="pills-home-tab1" data-toggle="pill" href="#pills-home1" role="tab" aria-controls="pills-home1" aria-selected="true">Statistics</a>
</li>
<li class="nav-item">
<a class="linkStadisticas nav-link" id="pills-profile-tab1" data-toggle="pill" href="#pills-profile1" role="tab" aria-controls="pills-profile1" aria-selected="false">Information</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content" id="pills-tabContent1">
<div class="tab-pane fade show active" id="pills-home1" role="tabpanel" aria-labelledby="pills-home-tab1">
<canvas id="lineChart" class="lineChart" width="100%" height="100%"></canvas>
</div>
<div class="tab-pane fade" id="pills-profile1" role="tabpanel" aria-labelledby="pills-profile-tab1">
<p class=" textoStadisticas font-small text-muted mx-1">
Information about the statistics
</p>
</div>
</div>
</div>
</div>
</section>
</div>

Answer 1

You have to target [aria-expanded="true"] / [aria-expanded="false"] for expand/collapse Icon UI:
.botonExpandir[aria-expanded="true"] i::before {
content: "\f13a";
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.3.0/font/bootstrap-icons.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="columna">
<section class="stadisticCard">
<div class="card chart-card">
<div class="card-body pb-0">
<h5 class="card-title font-weight-bold">Amount of food wasted each season in Spain</h5>
<p class="card-text float-left">Spanish Government • 2020</p>
<div class="float-right">
<button class="botonExpandir collapsed" type="button" data-toggle="collapse" data-target="#multiCollapseExample1" aria-expanded="false" aria-controls="multiCollapseExample1">
<i class="bi bi-arrow-down-circle"></i>
</button>
</div>
</div>
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="card-body">
<ul class="nav nav-tabs nav-fill mb-3" id="pills-tab1" role="tablist">
<li class="nav-item ms-0" role="presentation">
<a class="linkStadisticas nav-link active" id="pills-home-tab1" data-toggle="pill" href="#pills-home1" role="tab" aria-controls="pills-home1" aria-selected="true">Statistics</a>
</li>
<li class="nav-item">
<a class="linkStadisticas nav-link" id="pills-profile-tab1" data-toggle="pill" href="#pills-profile1" role="tab" aria-controls="pills-profile1" aria-selected="false">Information</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content" id="pills-tabContent1">
<div class="tab-pane fade show active" id="pills-home1" role="tabpanel" aria-labelledby="pills-home-tab1">
<canvas id="lineChart" class="lineChart" width="100%" height="100%"></canvas>
</div>
<div class="tab-pane fade" id="pills-profile1" role="tabpanel" aria-labelledby="pills-profile-tab1">
<p class=" textoStadisticas font-small text-muted mx-1">
Information about the statistics
</p>
</div>
</div>
</div>
</div>
</section>
</div>