How do I show the description of a T-shirt when I click on it?

Question

My code is like this:

<div class='CamisetaTudo'>
   <img class='Camiseta'>camiseta.jpg</img>
   <p class='Clique'>Clique aqui</p>
   <p class='Descricao'>Descrição aqui</p>
</div>

<div class='CamisetaTudo'>
   <img class='Camiseta'>camiseta.jpg</img>
   <p class='Clique'>Clique aqui</p>
   <p class='Descricao'>Descrição aqui</p>
</div>

$( ".Clique" ).click(function(){
    $(".Descricao").css("width","260px");   
});

$( ".Clique" ).mouseout(function(){
    $(".Descricao").css("width","");    
});

As in the example above, both the first div as the second have the same classes. It can have dozens of t-shirts and if I click on a .clique is opened only the first. I wanted to know some way that each one would open the description from inside their div.

Answer 1

First of all, there are some small errors in your code:

The source tag <img> is passed by the parameter src, even because it doesn’t "close" this tag, look how it should look:

<img class='Camiseta' src="camiseta.jpg" />

Another thing, avoid using graphic accents in parameters, such as the id and the class. So from "Description" I went to "Description".

Done this, you can just do so:

$('.CamisetaTudo .Descricao').hide(); //Esconde todas as descrições
$('.CamisetaTudo .Clique').click(function(){
    $(this).closest('.CamisetaTudo').children('.Descricao').toggle();
});

I used the method .closest() capturing the predecessor element, and the method .children() captures the children of some elements from a parameter.

I also used the .toggle() that gives a hide/show.

There are several other ways, this at least will ensure that the elements with the class the description in question are within the div.CamisetaTudo.

Example:

$('.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>

You can use more "beautiful" effects like the .toggleSlide(), I made this example as I said, clicking on the T-shirts, so I removed the "click here":

$('.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>

Answer 2

Although it has already been answered, I would like to add a solution without the use of Javascript. Which consists of using a field of type checkbox to create the effect of toggle.

Forgetting a little the classes of your code...

Usually, products have a unique identifier. I don’t know how your application works, but I often see this around. In HTML, when there is a reference to something unique we use the attribute id, right?!

There is an interesting technique that makes use of the attribute for tag <label>. This attribute serves to specify which element it is bound to by a unique identifier (attribute id). To test, how about clicking on the text instead of the box below?

<label for='toggle'>Clique no texto para (des)marcar a caixa</label>
<input id='toggle' type='checkbox'/>

Nice, but so what?!

So you can use this same technique to create the effect you need by linking a label to a checkbox that will control when to show/hide product information.

/**
 * Escondendo o input, afinal, não queremos que a "caixinha"
 * seja mostrada para o usuário.
 *
 * E também escondemos o div em que estão as informações
 * da camiseta.
 */

.shirt input,
.shirt .shirt-info {
  display: none 
}

/**
 *
 * Quando o 'checkbox' estiver marcado, pegaremos o próximo
 * elemento com classe `shirt-info' e exiberemos.
 *
 */
.shirt input:checked ~ .shirt-info {
  display: block
}

/**
 *
 * Quando o input não estiver marcado, pegamos o primeiro elemento
 * 'label' precedido (seletor '+') e colocamos um texto no conteúdo
 * após o elemento.
 *
 **/
.shirt input + label::after {
  content: 'Mostrar Informações';
}

/**
 *
 * Quando o input estiver marcado, apenas trocamos o texto do primeiro
 * elemento precedido.
 *
 */
.shirt input:checked + label::after { 
  content: 'Esconder Informações'
}


/**
 * As regras abaixo servem somente para tornar o exemplo mais "apresentável".
 * Não tem importância para o funcionamento do toggle.
 */

img { max-height: 80px }

.shirt { 
  align-items: center;
  border: 1px solid #ccc;
  display: flex;
  margin: 2px;
  justify-content: space-around
}

.shirt label {
  padding: 4px 10px;
  background: #3498db;
  border-bottom: 2px solid #2980b9;
  color: #fff;
  transition: all 200ms ease-in
}

.shirt input:checked + label {
  background: #1abc9c;
  border-bottom-color: #16a085
}

<!-- 
 ! container
 -->
<div class='shirt'>
  
  <!-- 
   ! A imagem do produto
   -->
  <img src='http://i.stack.imgur.com/ye5eI.png'/>
  
  <!--
   ! Os elementos que fazem o 'controle' do toggle.
   -->
  <input id='nike-vermelha' type='checkbox'/>
  <label for='nike-vermelha'></label>
  
  <!--
   ! As informações do produto
   -->
  <div class='shirt-info'>
    <p>Descrição Nike vermelha</p>
    <h2>R$ 0,99</h2>
  </div>
</div>

<div class='shirt'>
  <img src='http://i.stack.imgur.com/6ZOzb.png'/>
  <input id='nike-verde' type='checkbox'/>
  <label for='nike-verde'></label>
  <div class='shirt-info'>
    <p>Descrição Nike verde</p>
    <h2>R$ 4,00</h2>
  </div>
</div>

<div class='shirt'>
  <img src='http://i.stack.imgur.com/cUTTc.png'/>
  <input id='nike-azul' type='checkbox'/>
  <label for='nike-azul'></label>
  <div class='shirt-info'>
    <p>Descrição Nike azul</p>
    <h2>R$ 1,00</h2>
  </div>
</div>

References:

• CSS3 selectors - Maujor
• <label> - Mozilla