Question

I’m adding content to another <tr> when it’s clicked but I also need to change the html element + to a – (it needs to .toggle). So you click on the <tr> the content would expand below (show) at the same time the + changes to a – when the content is revealed below. Any help would be appreciated.

Here is the js:

<script>
var lastClicked;
$(document).ready(function() {
$("#myTable tr").click( function () {
 var rowID = $('#myRow' + this.rowIndex);
 if(rowID.length < 1)
    $('#myTable tr').eq(this.rowIndex).after('<tr id="myRow'+this.rowIndex+'">
<td colspan="5" style="background-color: #F0F5FE;"><p>"' + this.rowIndex + '" 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac mauris sit 
amet diam accumsan gravida in vel eros. Nunc tristique lacinia est. Donec 
condimentum tincidunt nisl, at fringilla velit placerat eget. Nullam sed tincidunt
augue. Maecenas vulputate mattis pharetra.</p></td></tr>').next().addClass
('content-area-1 p');   

else
 rowID.toggle();

return false;

if (lastClicked != null) {
    lastClicked.hide();
}

//$(this).toggle();

lastClicked = $(this);
});
});
</script>

Here is the html:

<tr class="row-1st">
  <td><a class="test-1">+</a></td>
  <td>07/06/201</td>
  <td>Phone Call</td>
  <td>Employee</td>
 </tr>

Answer 1

Add something like this in the click:

var tempVal = $(this).find('.test-1');
tempVal.text((tempVal.text() == '+' ? '-' : '+'));