Показать полную ширину div под строкой миниатюр после нажатия

Question

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

Мое вдохновение здесь: http://connexo.de/couponplatz.php или https://www.digitalsilk.com/about

Проблема, с которой я столкнулся, заключается в том, что мне нужен цитатный div для настройки Высота содержимого будет меняться, когда я нажимаю на невыбранный большой палец, он должен свернуться и открыть элемент, по которому щелкнули (теперь он просто свернут). Значение высоты не передается правильно, когда я устанавливаю переход элемента кавычки.

Чтобы сделать div содержимого полной ширины, я использовал абсолютное позиционирование и установил его высоту равным 0, а затем, после щелчка, его высота передается в основной контейнер, который будет вытягивать содержимое sh и соответствовать высоте элемента цитаты. чего я и хочу.

У меня нет Jquery опыта, и я не знаю, как правильно написать javascript, поэтому, пожалуйста, прости меня, если код выглядит очень грязно. Я учусь, и я надеюсь, что кто-то будет проливать свет или направлять меня в правильном направлении.

https://codepen.io/mateusz-paliga/pen/qBOEGBy

var quote_height = 0;
var initial_height = $(".container .card").height();
$(".container .card").click(function(){
 $(".container .card").not(this).height(100);
 $(".container .card .quote").not(this).height(0);
if (quote_height == 0) {
$(this).find('.quote').height(100);
quote_height = $(this).find('.quote').height();
$(this).height(initial_height + quote_height);
}
   else {
       $(this).height(initial_height);
       $(this).find('.quote').height(0);
       quote_height = $(this).find('.quote').height();
   }

})

.container {
            display: flex;
            flex-wrap: wrap;
        }
        .card {
            display: block;
            width:200px;
            height:100px;
            margin:15px;
            background: red;
            transition: height 0.2s ease-in-out;
        }
        .img-container {
            width: 200px;
            height: 100px;
            background: grey;
 
            position: relative;
        }
        .quote {
            width: 100%;
            background: orange;
            height: 0px;
            position:absolute;
            overflow: hidden;
            left:0;
        }
        .quote p {
            padding: 20px;
        }
        .quote-wrapper {
            height:auto;
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <div class="container">
        <div class="card">
<div class="img-container">image</div>
<div class="quote"><p>1914 translation by H. Rackham
    "But I must explain to you how all this mistaken idea of denouncing pleasure and</p></div>
</div>
<div class="card">
    <div class="img-container"></div>
    <div class="quote"><p>duo</p></div>
    </div>
    <div class="card">
        <div class="img-container"></div>
        <div class="quote"><p>"Lorem ipsum dolor sit amet,</p></div>
        </div>
        <div class="card">
            <div class="img-container"></div>
            <div class="quote"><p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip pariatur?"</p></div>
            </div>
            <div class="card">
                <div class="img-container"></div>
                <div class="quote"><p>nsequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p></div>
                </div>
                <div class="card">
                    <div class="img-container"></div>
                    <div class="quote"><p>a pariatur?"</p></div>
                    </div>


    </div>