Search code examples
jqueryeventsrowslidetoggle

jQuery / PHP: How to make slideToggle open only one row instead of all?


I've one little problem with my table, coded with DIVs. If I click on a row, it opens every row, but I only want to open the one I clicked, logically. Here is my example:

http://jsfiddle.net/autodidact/QPP5S/11/

Problem-code

<div class="table">
<div class="table_headline">
<div class="cell_1">When?</div>
<div class="cell_2">What?</div>
<div class="cell_3">Who?</div>
<div class="cell_4">Where?</div><br>
</div>  

<div class="row">
<div class="cell_1">Date</div>
<div class="cell_2">Concert</div>
<div class="cell_3">Artist #1 + Artist #2 + Artist #3</div>
<div class="cell_4">Venue</div><br>
</div>
<div class="info">Infos</div>

<div class="row">
<div class="cell_1">Date</div>
<div class="cell_2">Concert</div>
<div class="cell_3">Artist #1 + Artist #2 + Artist #3</div>
<div class="cell_4">Venue</div><br>
</div>
<div class="info">Infos</div>

<div class="row">
<div class="cell_1">Date</div>
<div class="cell_2">Concert</div>
<div class="cell_3">Artist #1 + Artist #2 + Artist #3</div>
<div class="cell_4">Venue</div><br>
</div>
<div class="info">Infos</div>
</div>

<script>$(document).ready(function() {
$('.row').on('click', function() {
    $(this).closest('.table').find('.info').slideToggle();
})
})
</script>

Edit: I am using PHP to get all events. So the fiddle-code is just an example.

Edit #2: Added the problem-code


Solution

  • You can simply replace .closest('.table').find('.info') with .next('.info').

    Demo: http://jsfiddle.net/8QqCh/

    You were selecting all elements with a class of .info instead of just the next element.

    Check the jQuery documentation for .next()