slideToggle (); to row in tables

Question

slideToggle (); to row in tables

Navigation

#1 by (1 votes)

0

$(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 the value below (1,000) appears, and the same with Joseph. It works perfectly when you click on Mary, but not for Joseph. How do I solve this problem?

javascript jquery front-end

asked by anonymous 23.05.2017 / 19:59

1 answer

Painting cell with conditional formatting using SE [duplicate] Get input value on same page with PHP [duplicate]

score 1 · Accepted Answer

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

$(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><divclass="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>