Quiero mostrar y ocultar un div, es una lista que tiene una clase son 4 div, con la misma clase y el botón que debería mostrar también tiene la misma clase, el problema que tengo es que con la función que tengo me muestra todos los div o solo al que le indico el indice lo que necesito es que muestre al elemento que se le hizo clic, espero se entienda.
Éste es mi código:
$('.info-team').hide();
$(".leer-mas").on("click", function() {
$('.info-team').each(function(indice) {
if (indice == 1) {
$(this).css('display', 'block');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class="name-team">team 1
<span class="leer-mas">Leer más</span>
</div>
<div class="info-team" style="display: none;">GMR holders benefit by having the right to bet other competitors in P2P, witness and vote in real time on events, host private betting competitions and claim rewards from referrals. </div>
</div>
<div>
<div class="name-team">team 2
<span class="leer-mas">Leer más</span>
</div>
<div class="info-team" style="display: none;">GMR holders benefit by having the right to bet other competitors in P2P, witness and vote in real time on events, host private betting competitions and claim rewards from referrals. </div>
</div>
<div>
<div class="name-team">team 3
<span class="leer-mas">Leer más</span>
</div>
<div class="info-team" style="display: none;">GMR holders benefit by having the right to bet other competitors in P2P, witness and vote in real time on events, host private betting competitions and claim rewards from referrals. </div>
</div>
<div>
<div class="name-team">team 4
<span class="leer-mas">Leer más</span>
</div>
<div class="info-team" style="display: none;">GMR holders benefit by having the right to bet other competitors in P2P, witness and vote in real time on events, host private betting competitions and claim rewards from referrals. </div>
</div>