I am working with Bootstrap 4 cards and I have a specific requirement for the card header to function as a slide toggle. When the header is clicked, it should smoothly expand a hidden div within the card without affecting the layout of the surrounding content. The challenge I'm facing is finding a solution that allows the expanded div to properly display its contents without being obscured by other elements or causing any pushing down of the card.
Here is an example of what I have so far:
$(document).ready(function () {
$(".flip").click(function () {
$(this).siblings(".panel").slideToggle("slow");
});
});
.panel, .flip {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
.panel {
padding: 50px;
display: none;
}
.flip{
cursor:pointer;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card text-center">
<div class="card-header flip">
Card Header - Click Me
</div>
<div class="panel">Hello world!</div>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some card text here.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card-footer text-muted">
Footer
</div>
</div>