Gridview expand collapse script

Question

I have a sharepoint 2010 with a webpart that has a gridview with the ability to expand/collapse to show more details in it.
I have migrated this webpart to SharePoint 2013 and deployed it without any errors, however when I visited the page it seems that '$' is undefined, so I updated the jquery src and pointed it to the latest version which is 1.10.2
after this, I encountered an error that says that .live is deprecated - here's the old code
<script type="text/javascript">
$("[src*=plus]").live("click", function () {
$(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>")
$(this).attr("src", "~/_layouts/images/minus.png");
$("[src*=minus]").live("click", function () {
$(this).attr("src", "~/_layouts/images/plus.png");
$(this).closest("tr").next().remove();
</script>
SO i went and changed the .live to .on and my udpated script is now this one
<script type="text/javascript">
$(document).ready(function () {
$(document).on("click", "[src*=plus]", function () {
$(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>")
$(this).attr("src", "~/_layouts/images/minus.png");
//alert("clicked plus");
$(document).on("click","[src*=minus]", function () {
$(this).attr("src", "~/_layouts/images/plus.png");
$(this).closest("tr").next().remove();
</script>
but the updated code above shows two entries (meaning two rows of the same detail) when the + sign is clicked, and it doesnt show the minus sign.
----------------------- Sharepoint Newbie

Answer 1

Try putting some class on your plus and minus and modify jQuery as
<script type="text/javascript">
$(document).ready(function () {
$(".plus").on("click", function () {
$(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>")
$(this).attr("src", "~/_layouts/images/minus.png");
//alert("clicked plus");
$(".minus").on("click", function () {
$(this).attr("src", "~/_layouts/images/plus.png");
$(this).closest("tr").next().remove();
</script>
Geetanjali Arora | My blogs |