Qualquer exemplo.

Navegando DOM com THIS

by Jonathan Nascimento

HTML

<div class="produtos-box">
  <img src="http://catalogo.reidoaluminio.com.br/img/sj/cacarola.jpg" width="186" height="186">
  
  <div class="detalhes-btn">
    <p>Informações</p>
  </div>
  
  <div class="produtos-box-info" >
    <div class="titulo-produto">
      <h2>01</h2>
    </div>
  </div>

  
  </div>
</div>

<div class="produtos-box">
<img src="http://catalogo.reidoaluminio.com.br/img/sj/caldeirao.jpg" width="186" height="186">
<div class="detalhes-btn hotel-bg-color">
<p>Informações</p>
</div>
<div class="produtos-box-info left" style="display: none;"><h2>02</h2></div>
</div>

CSS

.produtos-box {
    width: auto;
    max-width: 190px;
    height: auto;
    margin: 5px;
    float: left;
    padding-bottom: 5px;
}

.detalhes-btn {
    width: 100%;
    max-width: 190px;
    height: 40px;
    float: left;
    cursor: pointer;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.produtos-box .produtos-box-info {
    background: #fff;
    border: solid 2px #f5f8f9;
    width: 190px;
    max-width: 386px;
    height: 186px;
    z-index: 100;
    display: none;
    margin-top: -194px;
    position: relative;
}

.produtos .produtos-box .left {
    left: 200px!important;
}

.produtos-box-info {
  display:none;

  
}

JavaScript

$(document).ready(function(){

      $('.detalhes-btn').on("click", function() {

          var $this = $(this);
          $this.next('.produtos-box-info').slideToggle();


      });
      
});