Plus éléments à basculées, mais je veux seulement passer celui que je clique sur

Question

Lorsque je clique maintenant sur un table a que je veux passer le .info dans le même div, il permet de basculer l'.info dans les autres divs aussi. Quelqu'un peut-il m'aider s'il vous plaît?

function info() { 
 
    $('.table a').click(function() { 
 
    $('.info').toggle(); 
 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <div class="table"> 
 
    <a class="table-row" title="mehr &darr;"> 
 
     <div class="table-cell l"> 
 
     19:30 
 
     </div> 
 
     <div class="table-cell"> 
 
     Eröffnung + <b>Nwabis Plaatjie</b>: 3 Years, a month and 7 days 
 
     </div> 
 
     <div class="table-cell r"> 
 
     Experimentiertheater 
 
     </div> 
 
    </a> 
 
    </div> 
 
    <div class="info"> 
 
    <h1>test</h1> 
 
    </div> 
 
</div> 
 
<div> 
 
    <div class="table"> 
 
    <a class="table-row" title="mehr &darr;"> 
 
     <div class="table-cell l"> 
 
     19:30 
 
     </div> 
 
     <div class="table-cell"> 
 
     Eröffnung + <b>Nwabis Plaatjie</b>: 3 Years, a month and 7 days 
 
     </div> 
 
     <div class="table-cell r"> 
 
     Experimentiertheater 
 
     </div> 
 
    </a> 
 
    </div> 
 
    <div class="info"> 
 
    <h1>test</h1> 
 
    </div> 
 
</div>

Answer 1

La question est parce que vous choisissez tous les éléments .info avant d'appeler toggle(). Au lieu de cela, vous devez trouver celui qui correspond au a cliqué. Pour ce faire, vous pouvez utiliser le mot-clé this dans le gestionnaire de clic et parcourir le DOM, récupérer le parent .table, puis le prochain frère .info. Essayez ceci:

function info() { 
 
    $('.table a').click(function() { 
 
    $(this).closest('.table').next('.info').toggle(); 
 
    }); 
 
} 
 

 
info();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <div class="table"> 
 
    <a class="table-row" title="mehr &darr;"> 
 
     <div class="table-cell l"> 
 
     19:30 
 
     </div> 
 
     <div class="table-cell"> 
 
     Eröffnung + <b>Nwabis Plaatjie</b>: 3 Years, a month and 7 days 
 
     </div> 
 
     <div class="table-cell r"> 
 
     Experimentiertheater 
 
     </div> 
 
    </a> 
 
    </div> 
 
    <div class="info"> 
 
    <h1>test</h1> 
 
    </div> 
 
</div> 
 
<div> 
 
    <div class="table"> 
 
    <a class="table-row" title="mehr &darr;"> 
 
     <div class="table-cell l"> 
 
     19:30 
 
     </div> 
 
     <div class="table-cell"> 
 
     Eröffnung + <b>Nwabis Plaatjie</b>: 3 Years, a month and 7 days 
 
     </div> 
 
     <div class="table-cell r"> 
 
     Experimentiertheater 
 
     </div> 
 
    </a> 
 
    </div> 
 
    <div class="info"> 
 
    <h1>test</h1> 
 
    </div> 
 
</div>

Answer 2

$('.table a').click(function() { 
 
    $(this).parent('.table').next('.info').toggle(); 
 
});

.info { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <div class="table"> 
 
     <a class="table-row" title="mehr &darr;"> 
 
      <div class="table-cell l"> 
 
       19:30 
 
      </div> 
 
      <div class="table-cell"> 
 
       Eröffnung + <b>Nwabis Plaatjie</b>: 3 Years, a month and 7 days 
 
      </div> 
 
      <div class="table-cell r"> 
 
       Experimentiertheater 
 
      </div> 
 
     </a> 
 
    </div> 
 
    <div class="info"> 
 
     <h1>test</h1> 
 
    </div> 
 
</div> 
 
<div> 
 
    <div class="table"> 
 
     <a class="table-row" title="mehr &darr;"> 
 
      <div class="table-cell l"> 
 
       19:30 
 
      </div> 
 
      <div class="table-cell"> 
 
       Eröffnung + <b>Nwabis Plaatjie</b>: 3 Years, a month and 7 days 
 
      </div> 
 
      <div class="table-cell r"> 
 
       Experimentiertheater 
 
      </div> 
 
     </a> 
 
    </div> 
 
    <div class="info"> 
 
     <h1>test</h1> 
 
    </div> 
 
</div>