How To Use Javascript/jquery "this" Keyword To Toggle Rows

I have a form that will post data to a table and will separate the data into two rows, a row-header and a row-body (similar to bootstrap accordion card-header and card-body). Initi

Solution 1:

You should not use id as a selector for multiple buttons, because every element, in order to be properly selected by id should be unique, and thus selected one by one. For common functionality, when multiple similar elements to be selected class should be used instead.

<table class="table table-hover table-sm">
    <thead><tr><td>Row#</td><th><iclass="fas fa-cart-plus"></i></th><th>Column1</th><th>Column2</th><th>Column3</th><th>Details</th></tr></thead><tbody><!--Row header--><tr><td>1</td><td><inputtype="checkbox"name=""value=""/></td><td>Row1 Content1</td><td>R1C2</td><td>R1C3</td><td><buttonclass="moreInfo">Click Me</button></td></tr><!--Row body   --><trclass="table-body"><tdcolspan="7"class="hiddenRow"><divclass="showContent"><labelfor="">Description1:</label></div></td></tr><tr><td>2</td><td><inputtype="checkbox"name=""value=""/></td><td>Row2 Content1</td><td>R2C2</td><td>R2C3</td><td><buttonclass="moreInfo">Click Me</button></td></tr><!--Row body   --><trclass="table-body"><tdcolspan="7"class="hiddenRow"><divclass="showContent"><labelfor="">Description2:</label></div></td></tr></tbody>
</table>

$(".table-body").hide();
$(".moreInfo").on("click", function(){
    $(this).parent().parent().next().toggle();
});

https://jsfiddle.net/kaxocr7h/1/

Solution 2:

$(".table-body").hide();
$(document).on("click", ".moreInfo", function(){
   $(this).parent().parent().next().toggle();
});

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px#6c757d;
  padding: 10px;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><!-- 
  Bootstrap docs: https://getbootstrap.com/docs
--><tableclass="table table-hover table-sm"><thead><tr><td>Row#</td><th><iclass="fas fa-cart-plus"></i></th><th>Column1</th><th>Column2</th><th>Column3</th><th>Details</th></tr></thead><tbody><!--Row header--><trid="table-header"><td>1</td><td><inputtype="checkbox"name=""value=""/></td><td>Row1 Content1</td><td>R1C2</td><td>R1C3</td><td><buttonid="moreInfo"class="moreInfo">Click Me</button></td></tr><!--Row body   --><trid="table-body"class="table-body"><tdcolspan="7"class="hiddenRow"><divclass="showContent hide"><labelfor="">Description1:</label></div></td></tr><trid="table-header"><td>2</td><td><inputtype="checkbox"name=""value=""/></td><td>Row2 Content1</td><td>R2C2</td><td>R2C3</td><td><buttonid="moreInfo"class="moreInfo">Click Me</button></td></tr><!--Row body   --><trid="table-body"class="table-body"><tdcolspan="7"class="hiddenRow"><divclass="showContent hide"><labelfor="">Description2:</label></div></td></tr></tbody></table>

Add a class for moreInfo button and the table row that have to be toggled

    <table class="table table-hover table-sm">
        <thead><tr><td>Row#</td><th><iclass="fas fa-cart-plus"></i></th><th>Column1</th><th>Column2</th><th>Column3</th><th>Details</th></tr></thead><tbody><!--Row header--><trid="table-header"><td>1</td><td><inputtype="checkbox"name=""value=""/></td><td>Row1 Content1</td><td>R1C2</td><td>R1C3</td><td><buttonid="moreInfo"class="moreInfo">Click Me</button></td></tr><!--Row body   --><trid="table-body"class="table-body"><tdcolspan="7"class="hiddenRow"><divclass="showContent hide"><labelfor="">Description1:</label></div></td></tr><trid="table-header"><td>2</td><td><inputtype="checkbox"name=""value=""/></td><td>Row2 Content1</td><td>R2C2</td><td>R2C3</td><td><buttonid="moreInfo"class="moreInfo">Click Me</button></td></tr><!--Row body   --><trid="table-body"class="table-body"><tdcolspan="7"class="hiddenRow"><divclass="showContent hide"><labelfor="">Description2:</label></div></td></tr></tbody>
    </table>






    $(".table-body").hide();
$(document).on("click", ".moreInfo", function(){
   $(this).parent().parent().next().toggle();
});

Solution 3:

id should be unique, Look into below code with class selector.

$(document).ready(function() {
  $(".table-body").hide();
  $(".moreInfo").on("click", function() {
    $(this).closest('tr').next(".table-body").toggle();
  });
});

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px#6c757d;
  padding: 10px;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><tableclass="table table-hover table-sm"><thead><tr><td>Row#</td><th><iclass="fas fa-cart-plus"></i></th><th>Column1</th><th>Column2</th><th>Column3</th><th>Details</th></tr></thead><tbody><!--Row header--><trid="table-header"><td>1</td><td><inputtype="checkbox"name=""value="" /></td><td>Row1 Content1</td><td>R1C2</td><td>R1C3</td><td><buttonclass="moreInfo">Click Me</button></td></tr><!--Row body   --><trclass="table-body"><tdcolspan="7"class="hiddenRow"><divclass="showContent hide"><labelfor="">Description1:</label></div></td></tr><trid="table-header"><td>2</td><td><inputtype="checkbox"name=""value="" /></td><td>Row2 Content1</td><td>R2C2</td><td>R2C3</td><td><buttonclass="moreInfo">Click Me</button></td></tr><!--Row body   --><trclass="table-body"><tdcolspan="7"class="hiddenRow"><divclass="showContent hide"><labelfor="">Description2:</label></div></td></tr></tbody></table>