JS выпадающий текст по блокам

JS выпадающий текст по блокам

Выпадает текст при наведении мышкой.

Пример (если ещё работает): https://codepen.io/vbond2603/pen/LWgVQK

Только там нужно заменить display:inline-block на float:left.

HTML:

<div class="product-thumb">
  <div class="caption">
    <h4>Заголовок</h4>
    <p class="price">200$</p>
  </div>
  <div class="toogle">
    <p>Описание Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis impedit eos similique recusandae asperiores odit, et, nam deleniti ab voluptas?</p>
  </div>
</div>
<div class="product-thumb">
  <div class="caption">
    <h4>Заголовок</h4>
    <p class="price">200$</p>
  </div>
  <div class="toogle">
    <p>Описание Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis impedit eos similique recusandae asperiores odit, et, nam deleniti ab voluptas?</p>
  </div>
</div>
<div class="product-thumb">
  <div class="caption">
    <h4>Заголовок</h4>
    <p class="price">200$</p>
  </div>
  <div class="toogle">
    <p>Описание Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis impedit eos similique recusandae asperiores odit, et, nam deleniti ab voluptas?</p>
  </div>
</div>

CSS:

.product-thumb {
  padding: 20px;
  margin: 50px;
  float: left;
  background: #eee;
  width: 200px;
  cursor: pointer;
}

JS:

$('.toogle').hide();
$('.product-thumb').hover( function() {
  $(this).find('.toogle').show().stop()
    },
    function() {
  $(this).find('.toogle').hide().stop();
});

Результат: