Bootstrap card collapse not working properly-CodePudding

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 > 
    <section >     
        <div >
            <div >
            <h5 >Amount of food wasted each season in Spain</h5>
            <p >Spanish Government • 2020</p>
                <div >
                    <button  type="button" data-toggle="collapse" data-target="#multiCollapseExample1" aria-expanded="false" aria-controls="multiCollapseExample1">
                        <i ></i>
                    </button>
                </div>
            </div>
            <div  id="multiCollapseExample1">
                <div >
                    
                    <ul  id="pills-tab1" role="tablist">
                        <li  role="presentation">
                        <a  id="pills-home-tab1" data-toggle="pill" href="#pills-home1" role="tab" aria-controls="pills-home1" aria-selected="true">Statistics</a>
                        </li>
                        <li >
                        <a  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 >
                    <div  id="pills-tabContent1">
                        <div  id="pills-home1" role="tabpanel" aria-labelledby="pills-home-tab1">
                        <canvas id="lineChart"  width="100%" height="100%"></canvas>
                        </div>

                        <div  id="pills-profile1" role="tabpanel" aria-labelledby="pills-profile-tab1">
                            
                        <p >
                            Information about the statistics        
                        </p>
                        
                        </div>
                </div>
                </div>
        </div>        
    </section>
</div>

CodePudding user response：

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/[email protected]/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 > 
    <section >     
        <div >
            <div >
            <h5 >Amount of food wasted each season in Spain</h5>
            <p >Spanish Government • 2020</p>
                <div >
                    <button  type="button" data-toggle="collapse" data-target="#multiCollapseExample1" aria-expanded="false" aria-controls="multiCollapseExample1">
                        <i ></i>
                    </button>
                </div>
            </div>
            <div  id="multiCollapseExample1">
                <div >
                    
                    <ul  id="pills-tab1" role="tablist">
                        <li  role="presentation">
                        <a  id="pills-home-tab1" data-toggle="pill" href="#pills-home1" role="tab" aria-controls="pills-home1" aria-selected="true">Statistics</a>
                        </li>
                        <li >
                        <a  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 >
                    <div  id="pills-tabContent1">
                        <div  id="pills-home1" role="tabpanel" aria-labelledby="pills-home-tab1">
                        <canvas id="lineChart"  width="100%" height="100%"></canvas>
                        </div>

                        <div  id="pills-profile1" role="tabpanel" aria-labelledby="pills-profile-tab1">
                            
                        <p >
                            Information about the statistics        
                        </p>
                        
                        </div>
                </div>
                </div>
        </div>        
    </section>
</div>