Show DIV content by clicking on the image with slideToggle

Question

I’m trying to get a click on an image in question to hide the previous title and show the current one, and so on. I’ve tried using nextAll, return false etc, but I think the problem is nesting classes, because regardless of the image clicked should appear the content in question.

For example: Clicking on the first image show the content of product 1, clicking on the next shows the content of product 2 and so on (Just one at a time). In that link of the fiddle gives to understand better.

$(".Titulo").hide();
$(".show_title").show();
$('div').click(function() {
     $(this).next(".Titulo").slideToggle();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="product-thumbs mb-xs-50">
   <h5 class="text-bold-300"><small>Outras Imagens</small></h5>
   <div class="owl-carousel owl-thumbs" data-slider-id="1"  style="display:inline; float:left;">
      <div class="owl-thumb-item show_title">
         //Clicando aqui aparecer texto do Produto 1
         <img width="20%" src="https://cdn.pling.com/img/d/c/0/2/e4fff450a6306e045f5c26801ce31c3efaeb.jpg" data-src="<?php echo$foto1 ?>" class="img-responsive">
      </div>
      <div class="owl-thumb-item show_title">
         //Clicando aqui aparecer texto do Produto 2
         <img width="20%" src="https://cdn.pling.com/img/d/c/0/2/e4fff450a6306e045f5c26801ce31c3efaeb.jpg" data-src="<?php echo$foto2 ?>" class="img-responsive">
      </div>
      <div class="owl-thumb-item show_title">
         //Clicando aqui aparecer texto do Produto 3
         <img width="20%" src="https://cdn.pling.com/img/d/c/0/2/e4fff450a6306e045f5c26801ce31c3efaeb.jpg" data-src="<?php echo$foto2 ?>" class="img-responsive">
      </div>
   </div>
</div>


 <div class="Titulo">
    <h2>Produto 1</h2>
    <p>Características</p>
</div>

<div class="Titulo">
    <h2>Produto 2</h2>
    <p>Características</p>
</div>

<div class="Titulo">
    <h2>Produto 3</h2>
    <p>Características</p>
</div>

Link to the jsfiddle : http://jsfiddle.net/d3nis/dL80ut7h/24/

Answer 1

The way the HTML, it is not possible to do it the way you tried, because the method next() needs to be with the nested elements for their proper functioning. There are many ways to do what you want, one of them is to put one more data attribute in divs and use it as an index to do the display control with the method eq().

$('.Titulo').hide();

$('.show_title').on('click', function(e) {
  $('.Titulo').hide();                       
  let indice = e.target.dataset.img;     // cria um índice a partir do data
  $('.Titulo').eq(indice).slideToggle(); // mostra o texto com o mesmo índice
});

$('.owl-carousel').owlCarousel()

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<div class="product-thumbs mb-xs-50">
  <h5 class="text-bold-300"><small>Outras Imagens</small></h5>
  <div class="owl-carousel owl-thumbs" data-slider-id="1">
    <div class="owl-thumb-item show_title">
      <img width="20%" src="https://cdn.pling.com/img/d/c/0/2/e4fff450a6306e045f5c26801ce31c3efaeb.jpg" data-img="0" data-src="<?php echo$foto1 ?>" class="img-responsive">
    </div>
    <div class="owl-thumb-item show_title">
      <img width="20%" src="https://cdn.pling.com/img/d/c/0/2/e4fff450a6306e045f5c26801ce31c3efaeb.jpg" data-img="1" data-src="<?php echo$foto2 ?>" class="img-responsive">
    </div>
    <div class="owl-thumb-item show_title">
      <img width="20%" src="https://cdn.pling.com/img/d/c/0/2/e4fff450a6306e045f5c26801ce31c3efaeb.jpg" data-img="2" data-src="<?php echo$foto2 ?>" class="img-responsive">
    </div>
  </div>
</div>


<div class="Titulo">
  <h2>Produto 1</h2>
  <p>Características</p>
</div>

<div class="Titulo">
  <h2>Produto 2</h2>
  <p>Características</p>
</div>

<div class="Titulo">
  <h2>Produto 3</h2>
  <p>Características</p>
</div>