Browse div with class and show only the selected item

Navigation
2

I want to show and hide a div, it is a list that has a class are 4 div, with the same class and the button that should show also has the same class, the problem I have is that with the function that I have it shows me all the div or just the one that I indicate the index what I need is that it shows the element that was clicked, I hope it is understood.

This is my code: 

$('.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>
    
asked by Sixto Mujica 29.12.2017 в 00:04
source

2 answers

1

Just as you have the code right now, it will always show you the second .info-team because you are specifying that the one with index 1 (JavaScript starts at 0) is the one that should be displayed.

Instead of showing the one with index 1, what you could do is go up one level (up to .name-team , using .closest(".name-team") ) and then select the next element (which is the info-team to display, using .next() or .next("info-team") ) and make a .show() of that element.

I've also moved the $('.info-team').hide() within the click event, so they hide when you click on one of them (although this is optional, I do not know if that's what you want).

Here you can see the code working: 

$(".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>
    
answered by 29.12.2017 в 01:38
0

What you are trying is a div spoiler or text spoiler and here is an example of what I did at the time. 

  <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>
    
answered by 29.12.2017 в 12:25
Join results in SQL Server Error installing Ubuntu Ubuntu 16.04 "dpkg: error processing archive /var/cache/apt/archives/apport_2.20.1-0ubuntu2.15_all.deb"