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><i class="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><input type="checkbox" name="" value=""/></td>
            <td>Row1 Content1</td>
            <td>R1C2</td>
            <td>R1C3</td>
            <td><button class="moreInfo">Click Me</button></td> 
        </tr> 
        <!--Row body   -->
        <tr class="table-body">
            <td colspan="7" class="hiddenRow">
                <div class="showContent"><label for="">Description1:</label></div>  
            </td>
        </tr> 
        <tr>
            <td>2</td>
            <td><input type="checkbox" name="" value=""/></td>
            <td>Row2 Content1</td>
            <td>R2C2</td>
            <td>R2C3</td>
            <td><button class="moreInfo">Click Me</button></td> 
        </tr> 
        <!--Row body   -->
        <tr class="table-body">
            <td colspan="7" class="hiddenRow">
                <div class="showContent"><label for="">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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->


<table class="table table-hover table-sm">
    <thead>
        <tr>
            <td>Row#</td>
            <th><i class="fas fa-cart-plus"></i></th>
            <th>Column1</th>
            <th>Column2</th>
            <th>Column3</th>
            <th>Details</th>
        </tr>
    </thead>
    
    <tbody>
        <!--Row header-->
        <tr id="table-header">
            <td>1</td>
            <td><input type="checkbox" name="" value=""/></td>
            <td>Row1 Content1</td>
            <td>R1C2</td>
            <td>R1C3</td>
            <td><button id="moreInfo" class="moreInfo">Click Me</button></td> 
        </tr>
        
        <!--Row body   -->
        <tr id="table-body" class="table-body">
            <td colspan="7" class="hiddenRow">
                <div class="showContent hide"><label for="">Description1:</label></div>  
            </td>
        </tr>
        
        <tr id="table-header">
            <td>2</td>
            <td><input type="checkbox" name="" value=""/></td>
            <td>Row2 Content1</td>
            <td>R2C2</td>
            <td>R2C3</td>
            <td><button id="moreInfo"  class="moreInfo">Click Me</button></td> 
        </tr>
        
        
        <!--Row body   -->
        <tr id="table-body" class="table-body">
            <td colspan="7" class="hiddenRow">
                <div class="showContent hide"><label for="">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><i class="fas fa-cart-plus"></i></th>
                <th>Column1</th>
                <th>Column2</th>
                <th>Column3</th>
                <th>Details</th>
            </tr>
        </thead>

        <tbody>
            <!--Row header-->
            <tr id="table-header">
                <td>1</td>
                <td><input type="checkbox" name="" value=""/></td>
                <td>Row1 Content1</td>
                <td>R1C2</td>
                <td>R1C3</td>
                <td><button id="moreInfo" class="moreInfo">Click Me</button></td> 
            </tr>

            <!--Row body   -->
            <tr id="table-body" class="table-body">
                <td colspan="7" class="hiddenRow">
                    <div class="showContent hide"><label for="">Description1:</label></div>  
                </td>
            </tr>

            <tr id="table-header">
                <td>2</td>
                <td><input type="checkbox" name="" value=""/></td>
                <td>Row2 Content1</td>
                <td>R2C2</td>
                <td>R2C3</td>
                <td><button id="moreInfo"  class="moreInfo">Click Me</button></td> 
            </tr>


            <!--Row body   -->
            <tr id="table-body" class="table-body">
                <td colspan="7" class="hiddenRow">
                    <div class="showContent hide"><label for="">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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover table-sm">
  <thead>
    <tr>
      <td>Row#</td>
      <th><i class="fas fa-cart-plus"></i></th>
      <th>Column1</th>
      <th>Column2</th>
      <th>Column3</th>
      <th>Details</th>
    </tr>
  </thead>

  <tbody>
    <!--Row header-->
    <tr id="table-header">
      <td>1</td>
      <td><input type="checkbox" name="" value="" /></td>
      <td>Row1 Content1</td>
      <td>R1C2</td>
      <td>R1C3</td>
      <td><button class="moreInfo">Click Me</button></td>
    </tr>

    <!--Row body   -->
    <tr class="table-body">
      <td colspan="7" class="hiddenRow">
        <div class="showContent hide"><label for="">Description1:</label></div>
      </td>
    </tr>

    <tr id="table-header">
      <td>2</td>
      <td><input type="checkbox" name="" value="" /></td>
      <td>Row2 Content1</td>
      <td>R2C2</td>
      <td>R2C3</td>
      <td><button class="moreInfo">Click Me</button></td>
    </tr>


    <!--Row body   -->
    <tr class="table-body">
      <td colspan="7" class="hiddenRow">
        <div class="showContent hide"><label for="">Description2:</label></div>
      </td>
    </tr>

  </tbody>
</table>