Antes de tudo, existe alguns pequenos erros em seu código:
O source da tag <img>
é passado pelo parâmetro src
, atém porque não se "fecha" essa tag, olhe como deveria ficar:
<img class='Camiseta' src="camiseta.jpg" />
Outra coisa, evite usar acentos gráficos em parâmetros, como o id e a class. Então de "Descrição" passei para "Descricao".
Feito isso, você pode fazer simplesmente assim:
$('.CamisetaTudo .Descricao').hide(); //Esconde todas as descrições
$('.CamisetaTudo .Clique').click(function(){
$(this).closest('.CamisetaTudo').children('.Descricao').toggle();
});
Usei o método .closest()
que captura o elemento antecessor, e o método .children()
captura os filhos de algum elementos a partir de um parâmetro.
Usei também o .toggle()
que dá um hide/show
.
Há vários outros modos, esse ao menos garantirá que os elementos com a class descrição em questão estejam dentro das div.CamisetaTudo
.
Exemplo:
$('.CamisetaTudo .Descricao').hide(); //Esconde todas as descrições
$('.CamisetaTudo .Clique').click(function(){
$(this).closest('.CamisetaTudo').children('.Descricao').toggle();
});
img{
width: 100px;
}
.CamisetaTudo .Clique{
font-weight: bold;
color: darkBlue;
font-family: sans-serif;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='CamisetaTudo'>
<img class='Camiseta' src="http://defesa.org/ocart/image/data/Camiseta%20Medidas.png" />
<p class='Clique'>Clique aqui</p>
<p class='Descricao'>Descrição aqui</p>
</div>
<div class='CamisetaTudo'>
<img class='Camiseta' src="http://defesa.org/ocart/image/data/Camiseta%20Medidas.png" />
<p class='Clique'>Clique aqui</p>
<p class='Descricao'>Descrição aqui</p>
</div>
Você pode usar efeitos mais "bonitos" como o .toggleSlide()
, fiz esse exemplo como disse, clicando nas camisetas, assim retirei o "clique aqui":
$('.CamisetaTudo .Descricao').hide();
$('.CamisetaTudo .Camiseta').click(function(){
$(this).closest('.CamisetaTudo').children('.Descricao').slideToggle('fast');
});
img{
width: 100px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='CamisetaTudo'>
<img class='Camiseta' src="http://defesa.org/ocart/image/data/Camiseta%20Medidas.png" />
<p class='Descricao'>Descrição aqui</p>
</div>
<div class='CamisetaTudo'>
<img class='Camiseta' src="http://defesa.org/ocart/image/data/Camiseta%20Medidas.png" />
<p class='Descricao'>Descrição aqui</p>
</div>