2

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>

1
  • puedes poner el html mas porfavor, y mejora tu escritura poniendo comas, para una mejor comprension el 28 dic. 2017 a las 23:19

2 respuestas 2

2

Tal y como tienes el código ahora mismo, siempre te va a mostrar el segundo .info-team porque estás especificando que el que tiene índice 1 (JavaScript empieza en 0) es el que debe mostrarse.

En lugar de mostrar el que tiene índice 1, lo que podrías hacer es subir un nivel (hasta el .name-team, usando .closest(".name-team")) y entonces seleccionar el siguiente elemento (que es el info-team a mostrar, usando .next() o .next("info-team")) y hacer un .show() de ese elemento.

También he movido el $('.info-team').hide() dentro del evento click, para que se escondan cuando se pulse en uno de ellos (aunque esto es opcional, no sé si es lo que quieres).

Aquí puedes ver el código funcionando:

$(".leer-mas").on("click", function() {
  $('.info-team').hide();
  $(this).closest(".name-team").next(".info-team").show();
});
<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>

0

Tu lo que intentas es un div spoiler o text spoiler e aqui te dejo un ejemplo de lo que yo hice en su momento.

  <h1>Mostrar Enlace</h1>
  <style>
 .oculto{visibility:hidden;}
 .colores{color:red;}
 </style>
 <script>
 function MostrarEnlace(){
 var x = document.getElementById("Enlace");
 if(x.style.visibility==='visible'){
 x.style.visibility='hidden';
 }else{
 x.style.visibility='visible';
 }
 }
 </script>
 <input type="button" value="mostrar enlace" onclick="MostrarEnlace()">
 <a href="http://www.google.es" class="oculto colores" 
 id="Enlace">Busqueda Google</a>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.