As you can see after you run the code, i have multiple tables, let us assume they were dynamically created with PHP. I try to hide/show the entire tbody of a table if i click at it's thead.

I could just give each table it's own id and write the jquery code for each table... but since the tables are dynamically created, i can't solve it like this.

The current version of my jquery script toggles all tbody's if i click on a thead, instead of only the thead of the table which i actually clicked.

My only idea to solve this would be to also create the jquery code dynamically (but im not sure if this will actually work), but before i try this, does someone know if there is an easier solution?

I thought about something like this:

$("this tbody").css("display","none");

So that it only selects the tbody of the thead which i actually clicked on.

var main = function()
{
    $toggle = true;
  
    $("thead").click
    (
        function()
        {
            if ($toggle)
            {
                $toggle = false;
                $("tbody").css("display","none");
            }
            else
            {
                $toggle = true;
                $("tbody").css("display","");
            }
        }
    );

}
$(document).ready(main);

table, td {
  border: 1px solid black;
}

td {
  color: red;
  display: block;
  max-width: 120px;
  white-space: nowrap;
  overflow-x: auto;
  background-color: blue;
}

th {
    border: 1px solid black;
}

<script src=".1.1/jquery.min.js"></script>
<table>
 <thead>
     <tr><th id="here1">First Table</th></tr>
 </thead>
 <tbody>
    <tr><td>A</td></tr>
    <tr><td>B</td></tr>
    <tr><td>C</td></tr>
</tbody>
</table>

<table>
 <thead>
     <tr><th id="here1">Second Table</th></tr>
 </thead>
 <tbody>
    <tr><td>A</td></tr>
    <tr><td>B</td></tr>
    <tr><td>C</td></tr>
</tbody>
</table>

As you can see after you run the code, i have multiple tables, let us assume they were dynamically created with PHP. I try to hide/show the entire tbody of a table if i click at it's thead.

I could just give each table it's own id and write the jquery code for each table... but since the tables are dynamically created, i can't solve it like this.

The current version of my jquery script toggles all tbody's if i click on a thead, instead of only the thead of the table which i actually clicked.

My only idea to solve this would be to also create the jquery code dynamically (but im not sure if this will actually work), but before i try this, does someone know if there is an easier solution?

I thought about something like this:

$("this tbody").css("display","none");

So that it only selects the tbody of the thead which i actually clicked on.

var main = function()
{
    $toggle = true;
  
    $("thead").click
    (
        function()
        {
            if ($toggle)
            {
                $toggle = false;
                $("tbody").css("display","none");
            }
            else
            {
                $toggle = true;
                $("tbody").css("display","");
            }
        }
    );

}
$(document).ready(main);

table, td {
  border: 1px solid black;
}

td {
  color: red;
  display: block;
  max-width: 120px;
  white-space: nowrap;
  overflow-x: auto;
  background-color: blue;
}

th {
    border: 1px solid black;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
 <thead>
     <tr><th id="here1">First Table</th></tr>
 </thead>
 <tbody>
    <tr><td>A</td></tr>
    <tr><td>B</td></tr>
    <tr><td>C</td></tr>
</tbody>
</table>

<table>
 <thead>
     <tr><th id="here1">Second Table</th></tr>
 </thead>
 <tbody>
    <tr><td>A</td></tr>
    <tr><td>B</td></tr>
    <tr><td>C</td></tr>
</tbody>
</table>

• javascript
• jquery
• html
• css

4 Answers 4

First, instead of using $('tbody'), use this

Second, instead of managing variables for visibility, use toggle function

var main = function() {
  $("thead").on("click", function() {
    $(this).parents("table").find("tbody").toggle();
  });

}
$(document).ready(main);

table,
td {
  border: 1px solid black;
}
td {
  color: red;
  display: block;
  max-width: 120px;
  white-space: nowrap;
  overflow-x: auto;
  background-color: blue;
}
th {
  border: 1px solid black;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th id="here1">First Table</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>A</td>
    </tr>
    <tr>
      <td>B</td>
    </tr>
    <tr>
      <td>C</td>
    </tr>
  </tbody>
</table>

<table>
  <thead>
    <tr>
      <th id="here1">Second Table</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>A</td>
    </tr>
    <tr>
      <td>B</td>
    </tr>
    <tr>
      <td>C</td>
    </tr>
  </tbody>
</table>

try with

$(this).parent().find('tbody').css("display","none");

you can use .next() https://api.jquery./next/

$(this).next("tbody").css("display","none");

or better yet use toggle https://api.jquery./toggle/

$(this).next("tbody").toggle();

<table class="table" id="item"style="display:none;">
<tbody style="height:0px;width:82%; display:table;"></tbody>
                                    </table>

and using script

<script>`enter code here`
document.getElementById("item").style.display = "block";
</script>