Add a Collapsing Footer in a Card (Bootstrap) - html

Question

I made three blocks – using the CARD class in bootstrap. That worked well. Now I'd like to add a footer (or just a div) to the card that allows to "Show/Hide Details".
I tried 10 different ways and the cards always "break" for some reason. I have the code that works for the cards but without the collapsing
The goal is to have the last 3 lines collapsing, while the "Show payment schedule" changes to "Hide payment schedule".
Who knows how to get there? Where to put the div class for the collapsing without breaking the card?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<!-- Wrapper for Cards -->
<div class="row mx-n2">
<div class="col-sm-6 col-md-4 px-2 mb-3 mb-md-0">
<!-- Card 1 -->
<a class="card h-100 transition-3d-hover" href="#">
<img class="card-img-top" src="../../assets/img/480x220/monthly.gif" alt="Monthly Animation">
<div class="card-body">
<h4>Monthly</h4>
<p class="font-size-1 text-body mb-0">You will be charged every month the amount of</p>
<h3 class="text-center font-weight-bold text-black-50 mb-0 mt-4">USD 43</h3>
</div>
<hr/>
<!-- Collapsing Footer -->
<div class="card-footer border-0 pt-0">
<span class="font-size-1 text-black-50">Show payment schedule</span>
<div class="row pt-2">
<div class="col">
<span class="today font-size-1 text-black-50" data-toggle="tooltip" data-html="true" id="today">Today</span>
</div>
<div class="col">
<span class="font-size-1 text-black-50">USD 43</span>
</div>
</div>
<div class="row">
<div class="col">
<span class="font-size-1 text-black-50" data-toggle="tooltip" data-html="true" title="placeholder">June 2020</span>
</div>
<div class="col">
<span class="font-size-1 text-black-50">USD 43</span>
</div>
</div>
<div class="row">
<div class="col">
<span class="font-size-1 text-black-50" data-toggle="tooltip" data-html="true" title="placeholder">July 2020</span>
</div>
<div class="col">
<span class="font-size-1 text-black-50">USD 43</span>
</div>
</div>
</div>
<!-- End Collapsing Footer -->
</a>
<!-- End Card 1 -->
</div>
<div class="col-sm-6 col-md-4 px-2 mb-3 mb-md-0">
<!-- Card 2 -->
<a class="card h-100 transition-3d-hover" href="#">
<img class="card-img-top" src="../../assets/img/480x220/quarterly.gif" alt="Quarterly Animation">
<div class="card-body">
<h4>Quarterly</h4>
<p class="font-size-1 text-body mb-0">You will be charged every third month the amount of</p>
<h3 class="text-center font-weight-bold text-black-50 mb-0 mt-4">USD 102</h3>
</div>
<hr/>
<!-- Collapsing Footer -->
<div class="card-footer border-0 pt-0">
<span class="font-size-1 text-black-50 ">Show payment schedule</span>
<div class="row pt-2">
<div class="col">
<span class="today font-size-1 text-black-50" data-toggle="tooltip" data-html="true" id="today">Today</span>
</div>
<div class="col">
<span class="font-size-1 text-black-50">USD 102</span>
</div>
</div>
<div class="row">
<div class="col">
<span class="font-size-1 text-black-50" data-toggle="tooltip" data-html="true" title="placeholder">July 2020</span>
</div>
<div class="col">
<span class="font-size-1 text-black-50">July 2020</span>
</div>
</div>
<div class="row">
<div class="col">
<span class="font-size-1 text-black-50" data-toggle="tooltip" data-html="true" title="placeholder">July 2020</span>
</div>
<div class="col">
<span class="font-size-1 text-black-50">USD 43</span>
</div>
</div>
</div>
<!-- End Collapsing Footer -->
</a>
<!-- End Card 2 -->
</div>
<div class="col-sm-6 col-md-4 px-2 mb-3 mb-md-0">
<!-- End Card 3 -->
<a class="card h-100 transition-3d-hover" href="#">
<img class="card-img-top" src="../../assets/img/480x220/yearly.gif" alt="Yearly Animation">
<div class="card-body">
<h4>Annually</h4>
<p class="font-size-1 text-body mb-0">You will be charged once every year the amount of</p>
<h3 class="text-center font-weight-bold text-black-50 mb-0 mt-4">USD 408</h3>
</div>
<hr/>
<!-- Collapsing Footer -->
<div class="card-footer border-0 pt-0">
<span class="font-size-1 text-black-50">Show payment schedule</span>
<div class="row pt-2">
<div class="col">
<span class="today font-size-1 text-black-50" data-toggle="tooltip" data-html="true" id="today">Today</span> </div>
<div class="col">
<span class="font-size-1 text-black-50">USD 408</span>
</div>
</div>
<div class="row">
<div class="col">
<span class="font-size-1 text-black-50" data-toggle="tooltip" data-html="true" title="placeholder">April 2021</span>
</div>
<div class="col">
<span class="font-size-1 text-black-50">USD 408</span>
</div>
</div>
<div class="row">
<div class="col">
<span class="font-size-1 text-black-50" data-toggle="tooltip" data-html="true" title="placeholder">April 2022</span>
</div>
<div class="col">
<span class="font-size-1 text-black-50">USD 408</span>
</div>
</div>
</div>
<!-- End Collapsing Footer -->
</a>
<!-- End Card 3 -->
</div>
</div>
<!-- End Wrapper for Cards -->

Answer 1

Like this? for more info, visit https://getbootstrap.com/docs/4.4/components/collapse/
Explanation
I added
data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample"
to your span so, it works like collapsable toggler and added root div with
class="collapse show" id="collapseExample"
to your three items so only one div can collapse.
document.querySelectorAll('.change_text').forEach(cur => {
cur.addEventListener('click', e => {
const target = e.target;
if (target.textContent === 'Show payment schedule') {
target.textContent = 'Hide payment schedule';
} else {
target.textContent = 'Show payment schedule';
}
})
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="row mx-n2">
<div class="col-sm-6 col-md-4 px-2 mb-3 mb-md-0">
<!-- End Card 3 -->
<div class="card h-100 transition-3d-hover" href="#">
<img class="card-img-top" src="../../assets/img/480x220/yearly.gif" alt="Yearly Animation">
<div class="card-body">
<h4>Annually</h4>
<p class="change_text font-size-1 text-body mb-0">You will be charged once every year the amount of</p>
<h3 class="text-center font-weight-bold text-black-50 mb-0 mt-4">USD 408</h3>
</div>
<hr/>
<!-- Collapsing Footer -->
<div class="card-footer border-0 pt-0">
<a class="change_text font-size-1 text-black-50" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">Show payment schedule</a>
<div class="collapse show" id="collapseExample">
<div class="row pt-2">
<div class="col">
<span class="today font-size-1 text-black-50" data-toggle="tooltip" data-html="true" id="today">Today</span> </div>
<div class="col">
<span class="font-size-1 text-black-50">USD 408</span>
</div>
</div>
<div class="row">
<div class="col">
<span class="font-size-1 text-black-50" data-toggle="tooltip" data-html="true" title="placeholder">April 2021</span>
</div>
<div class="col">
<span class="font-size-1 text-black-50">USD 408</span>
</div>
</div>
<div class="row">
<div class="col">
<span class="font-size-1 text-black-50" data-toggle="tooltip" data-html="true" title="placeholder">April 2022</span>
</div>
<div class="col">
<span class="font-size-1 text-black-50">USD 408</span>
</div>
</div>
</div>
</div>
<!-- End Collapsing Footer -->
</div>
<!-- End Card 3 -->
</div>
</div>

Answer 2

It looks like your collapsing section is just another card element nested in the parent card element. According to the docs, Bootstrap has a Collapse element and it's used in conjunction with data-toggle="collapse" when the element triggering the animation is a link. When the element triggering the animation is a div, like in your case, you have to give it the class collapse.
The docs show an examples for both. Trying something like the second part:
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-target
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>