I have 4 cards which contain data. I want when first header text card is clicked, it expand upward, and info I displayed and when clicked the same card it hide the body but the rest card stays the same,

Here is visual of what I want.

[![enter image description here](https://i.stack.imgur.com/DkHlz.png)](https://i.stack.imgur.com/DkHlz.png)

> 
> UPDATE
> 
> 
> 

Here is JSFiddle with all four cards: <http://jsfiddle.net/Mwanitete/rzjxkv8e/2/>
Here is HTML:

```
<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 class="data">

<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-body">
            card block
        </div>
    </div>
</div>

<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-body">
            card block
        </div>
    </div>
</div>
<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-body">
            card block
        </div>
    </div>
</div>
<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-body">
            card block
        </div>
    </div>
</div>
</div>

```

Here is JavaScript

```
$('.card-header').click(function(){
    $('.card').toggleClass('.card-size')
})

```

Here is CSS

```
.data{
  display: flex;
}

.card-size{
  height: 224px;
}

```