Увеличить высоту и ширину загрузочной карты 4 в свернутом виде?

Question

Сценарий:

• У меня есть следующий раздел, содержащий карточку,
  , когда я нажимаю на карточку, она исчезает и одновременно показывает информацию (блок карты)

Todo:

• Я хочу, чтобы ширина и высота увеличились,

  Вот jsfiddle: http://jsfiddle.net/Mwanitete/5bwryt1g/3/

  ПРИМЕЧАНИЕ: может не работать в jsfidle, но в моем locahost работает

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>

Текущий сценарий:

• В данный момент я просто расширяю и показываю данные, но не могу увеличить ширину и высоту.

Что мне нужно сделать, чтобы получить то, что я хочу?

Answer 1

Изменение Jquery.js порядок выше 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/