1
I have the following:
<figure class="itemImage">
<span title="Camiseta preta O Poderoso Chefão" style="background:url('img');background-size:cover;background-position:center;"></span>
<div class="price">
50,00R$
</div>
<div class="postButtons">
<span>icone compra</span>
<span class="moreinfobtn">icone info</span>
</div>
<div class="moreInfo">
<p>Tamanhos: P M G GG</p>
<p>Tecido assim e assado</p>
</div>
</figure>
<figure class="itemImage">
<span title="Camiseta preta O Poderoso Chefão" style="background:url('img');background-size:cover;background-position:center;"></span>
<div class="price">
50,00R$
</div>
<div class="postButtons">
<span>icone compra</span>
<span class="moreinfobtn">icone info</span>
</div>
<div class="moreInfo">
<p>Tamanhos: P M G GG</p>
<p>Tecido assim e assado</p>
</div>
</figure>
<script>
$(document).ready(function(){
$( "#postWrap .postButtons .moreinfobtn" ).click(function() {
$("#postWrap .moreInfo").toggleClass("moreInfoactive");
});
});
</script>
In that code every tag figure
contains a div with class "moreInfo", where I put the information of each t-shirt. This class at first is hidden, and that’s where the small script comes in at the end. By clicking the "moreinfobtn" button, the "moreInfoactive" class is added to the "moreInfo", displaying the information of each T-shirt.
But when I click on the button it adds the class to all the tags that contain the "moreInfo" class in the theme, which needed it to display only the post in question. Causing an effect like the one in the image below, notice that even when I clicked on the first post button, it displayed all the information. How can I solve?
Thanks for the help
– Ericki