<html><head>
<link rel="stylesheet" type="text/css" href="css/bootstrap-4.6.2.css">
<script src="js/jquery-3.7.0.js"></script>
<script src="js/bootstrap-4.6.2.js"></script>
<style>
a { text-decoration:none !important }
a:hover { text-decoration:none !important }
a[data-toggle="collapse"]::after {
width: "1em"; height: "1em"; content: "-";
}
a[data-toggle="collapse"].collapsed::after {
width: "1em"; height: "1em"; content: "+";
}
</style>
</head><body>
<div class="row m-0">
<div class="col card m-4 p-0">
<a class="card-header d-flex justify-content-between" data-toggle="collapse" href="#colbody">
<div class="w-100 "> Featured </div>
</a>
<div id="colbody" class="collapse">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
<div class="row m-0">
<div class="col card m-4 p-0">
<a class="card-header d-flex justify-content-between" data-toggle="collapse" href="#colbody2">
<div class="w-100 "> Featured </div>
</a>
<div id="colbody2" class="collapse">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div></div>
</div>
<div class="col card m-4 p-0">
<div class="card-header"> Featured </div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<script>
$('a[data-toggle="collapse"]').trigger('click')
</script>
</body></html>
<html><head>
<link rel="stylesheet" type="text/css" href="css/bootstrap-4.6.2.css">
<link rel="stylesheet" type="text/css" href="css/all.css">
<script src="js/all.js"></script>
<script src="js/jquery-3.7.0.js"></script>
<script src="js/bootstrap-4.6.2.js"></script>
<style>
.chevron::after {
border-style: solid;
border-width: 0.1rem 0.1rem 0 0;
content: '';
display: inline-block;
height: 0.45rem;
left: 0.15em;
position: relative;
top: 0.5rem;
transform: rotate(-45deg);
vertical-align: top;
width: 0.45rem;
}
.chevron.right:after {
left: 0rem;
transform: rotate(45deg);
}
.chevron.bottom:after {
top: 0.25rem;
transform: rotate(135deg);
}
.chevron.left:after {
left: 0.25rem;
transform: rotate(-135deg);
}
.collapse-header {
display: flex;
border: none;
justify-content: space-between;
}
</style>
</head><body>
<div class="row m-0">
<div class="col card m-4 p-0">
<button class="card-header collapse-header" data-toggle="collapse" data-target="#colbody">
Featured <span class="chevron right"></span>
</button>
<div id="colbody" class="collapse">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
<div class="row m-0">
<div class="col card m-4 p-0">
<button class="card-header collapse-header" data-toggle="collapse" data-target="#colbody2">
Featured <span class="chevron right"></span>
</button>
<div id="colbody2" class="collapse">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div></div>
</div>
<div class="col card m-4 p-0">
<div class="card-header"> Featured </div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<script>
$('.card-header').trigger('click')
$('.card-header').on('click',function(){
const $chevron = $($(this).find('.chevron'))
if ($chevron.hasClass('bottom')) {
$chevron.removeClass('bottom').addClass('right')
} else {
$chevron.removeClass('right').addClass('bottom')
}
})
</script>
</body></html>