Estou tentando fazer com que ao clicar em uma imagem em questão oculte o título anterior e mostre o atual, e assim, sucessivamente. Já tentei usando nextAll
, return false
etc, mas acho que o problema está no aninhamento de classes, pois independente da imagem clicada deve aparecer o conteúdo em questão.
Por exemplo: Clicando na primeira imagem mostre o conteúdo do produto 1, clicando na próxima mostra o conteúdo do produto 2 e assim por diante (Apenas um por vez). Nesse link do fiddle da pra entender melhor.
$(".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 do jsfiddle : http://jsfiddle.net/d3nis/dL80ut7h/24/