Increase height and width of a boottrap 4 card when collapsed? - html

Question

Scenario :
I have the following section which contain a card , when I click the card exapnds and shows the info (card-block) at the same time
Todo :
I want the width and height to increase,
Here is jsfiddle: http://jsfiddle.net/Mwanitete/5bwryt1g/3/
NOTE: it may not work in jsfidle but in my locahost works
HTML :
<div class="card">
<div class="card-header">
<a data-toggle="collapse" href="#test-block" aria-expanded="true" aria-controls="test-block">
card header
</a>
</div>
<div id="test-block" class="collapse">
<div class="card-block">
card block
</div>
</div>
</div>
Current Scenario :
Right now t just expand and shows data but am not able to make the width and height increase.
What do I need to do get what I want?

Answer 1

Change Jquery.js order Above bootstrap.js
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div id="test-block" class="collapse">
<div class="card-body">
card block
</div>
</div>
http://jsfiddle.net/5bwryt1g/8/