slideToggle(); for row in tables

Question

$(document).ready(function(){
    $("#flip").click(function(){
        $("#panel").slideToggle("slow");
    });
});



<div id="flip"><table><td>Maria</td></table></div>
<div id="panel"><table><td>1.000</td></table></div>

<div id="flip"><table><td>José</td></table></div>
<div id="panel"><table><td>2.000</td></table></div>

Following the code above, I need to click on Mary and appear the value below (1,000), and the same with Joseph. It is working perfectly when you click on Maria, but not for José. How do I solve this problem?

Answer 1

You are using id which is a unique identifier and only the first element found in the document is selected, try switching to class, example:

$(document).ready(function(){
    $(".flip").click(function(){
        $(this).next(".panel").slideToggle("slow");
    });
});

.flip{
  background-color:red;
  cursor:pointer;
}
.panel{
  background-color:blue;
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flip"><table><td>Maria</td></table></div>
<div class="panel"><table><td>1.000</td></table></div>

<div class="flip"><table><td>José</td></table></div>
<div class="panel"><table><td>2.000</td></table></div>