When I now click on a table a
that I want to toggle the .info
inside the same div, it toggles the .info
in the other divs too. Can somebody please help me?
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 ↓"> <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 ↓"> <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>
$('.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 ↓"> <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 ↓"> <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>
The issue is because you're selecting all the .info
elements before calling toggle()
. Instead, you need to find the one relevant to the clicked a
. To do that you can use the this
keyword within the click handler and traverse the DOM, retrieving the parent .table
, then the next sibling .info
. Try this:
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 ↓"> <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 ↓"> <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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.