Как изменить CSS на клик?

Question

У меня есть 4 карты, которые содержат данные.Я хочу, чтобы при нажатии на первую текстовую карточку заголовка она расширялась вверх и отображалась информация, а при щелчке по той же карточке скрывается тело, но остальная карта остается прежней,

Вот изображение того, что я хочу.

ОБНОВЛЕНИЕ

Вот JSFiddle со всеми четырьмя картами: http://jsfiddle.net/Mwanitete/rzjxkv8e/2/ Вот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>

Вот JavaScript

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

Вот CSS

.data{
  display: flex;
}

.card-size{
  height: 224px;
}

Answer 1

$('.card-header').click(function(){
    $(this).toggleClass('.card-size');
    $(this).parent().find('#test-block').toggleClass('show')
})

Используйте это

Answer 2

Вы просто пытаетесь изменить размер карты в целом при ее расширении? Если это так, потеряйте JQuery, вам просто нужен стиль CSS:

#test-block .card-body {
  height: 224px;
}

Если вы хотите, чтобы размер карты оставался неизменным после ее открытия, то вам не нужно переключать класс размера, а просто добавить его.

$('.card-header').click(function(){
    $(this).closest('.card').addClass('card-size');
})

http://jsfiddle.net/9musLxy4/74/

Answer 3

Вот JSFiddle с рабочим решением.

Я убрал атрибуты коллапса и опустил его до костей.

http://jsfiddle.net/9musLxy4/88/

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-container' data-card-id='1'>
  <div class='card-header' data-card-id='1'>
    Header
  </div>
  <div class='card-body collapse' data-card-id='1'>
    <div class='data'>
      Body 1
    </div>
  </div>
</div>

<div class='card-container' data-card-id='2'>
  <div class='card-header' data-card-id='2'>
    Header
  </div>
  <div class='card-body collapse' data-card-id='2'>
    <div class='data'>
      Body 2
    </div>
  </div>
</div>

<div class='card-container' data-card-id='3'>
  <div class='card-header' data-card-id='3'>
    Header
  </div>
  <div class='card-body collapse' data-card-id='3'>
    <div class='data'>
      Body 3
    </div>
  </div>
</div>

<div class='card-container' data-card-id='4'>
  <div class='card-header' data-card-id='4'>
    Header
  </div>
  <div class='card-body collapse' data-card-id='4'>
    <div class='data'>
      Body 4
    </div>
  </div>
</div>
</div>

CSS:

.data{
  display: flex;
}

.card-body {
  border: 1px solid black;
}

JS:

$('.card-container').on('click', function(event) {
    var id = $(this).data('card-id')
    $('.card-body[data-card-id="' + id + '"]').toggle()
})