Hide-2 (Table/Text/Content): 2-Section
Hide (Table/Text/Content): 2-Section
( 1-Section Link )
( Multi-Section Link )
Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Toggle Data Tables</title>
</head>
<body>
<h2>Data Table</h2>
<!-- Stock Table Section -->
<div style="background: lightgrey; padding: 0px;">
<button id="Stock-toggle-Button" onclick="StocktoggleTable()" style="width: 100%; text-align: left;">Stock (Hide Table)</button>
<table border="1" id="Stock-data-Table" style="display: none;">
<thead>
<tr>
<th>Item</th>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Doe</td>
<td>28</td>
<td>New York</td>
</tr>
<tr>
<td>2</td>
<td>Jane Smith</td>
<td>34</td>
<td>Los Angeles</td>
</tr>
</tbody>
</table>
</div>
<br>
<!-- Order Table Section -->
<div style="background: lightgrey; padding: 0px;">
<button id="Order-toggle-Button" onclick="OrdertoggleTable()" style="width: 100%; text-align: left;">Order (Hide Table)</button>
<table border="1" id="Order-data-Table" style="display: none;">
<thead>
<tr>
<th>Item</th>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Doe</td>
<td>28</td>
<td>New York</td>
</tr>
<tr>
<td>2</td>
<td>Jane Smith</td>
<td>34</td>
<td>Los Angeles</td>
</tr>
</tbody>
</table>
</div>
<script>
function StocktoggleTable() {
const table = document.getElementById("Stock-data-Table");
const toggleButton = document.getElementById("Stock-toggle-Button");
if (table.style.display === "none") {
table.style.display = "table";
toggleButton.textContent = "Stock (Hide Table)";
} else {
table.style.display = "none";
toggleButton.textContent = "Stock (Show Table)";
}
}
function OrdertoggleTable() {
const table = document.getElementById("Order-data-Table");
const toggleButton = document.getElementById("Order-toggle-Button");
if (table.style.display === "none") {
table.style.display = "table";
toggleButton.textContent = "Order (Hide Table)";
} else {
table.style.display = "none";
toggleButton.textContent = "Order (Show Table)";
}
}
</script>
</body>
</html>
Comments
Post a Comment