Hide-M (Table/Text/Content): Multi-Section
Hide-M (Table/Text/Content): Multi-Section
( 1-Section Link )
( 2-Section Link )
Without "onclick" Attribute:
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 Tables</h2>
<!-- Stock Table Section -->
<div style="background: lightgrey; padding: 0px;">
<button id="Stock-toggle-Button" style="width: 100%; text-align: left;">Stock (Show 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" style="width: 100%; text-align: left;">Order (Show 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><br>
<!-- Menu Table Section -->
<div style="background: lightgrey; padding: 0px;">
<button id="Menu-toggle-Button" style="width: 100%; text-align: left;">Menu (Show Table)</button>
<table border="1" id="Menu-data-Table" style="display: none;">
<thead>
<tr>
<th>Item</th>
<th>Dish</th>
<th>Price</th>
<th>Category</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Pasta</td>
<td>$12</td>
<td>Main Course</td>
</tr>
<tr>
<td>2</td>
<td>Salad</td>
<td>$8</td>
<td>Appetizer</td>
</tr>
</tbody>
</table>
</div><br>
<!-- JavaScript -->
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
// Stock Table Toggle
var stockButton = document.getElementById("Stock-toggle-Button");
var stockTable = document.getElementById("Stock-data-Table");
stockButton.addEventListener("click", function() {
if (stockTable.style.display === "none") {
stockTable.style.display = "table";
stockButton.textContent = "Stock (Hide Table)";
} else {
stockTable.style.display = "none";
stockButton.textContent = "Stock (Show Table)";
}
});
// Order Table Toggle
var orderButton = document.getElementById("Order-toggle-Button");
var orderTable = document.getElementById("Order-data-Table");
orderButton.addEventListener("click", function() {
if (orderTable.style.display === "none") {
orderTable.style.display = "table";
orderButton.textContent = "Order (Hide Table)";
} else {
orderTable.style.display = "none";
orderButton.textContent = "Order (Show Table)";
}
});
// Menu Table Toggle
var menuButton = document.getElementById("Menu-toggle-Button");
var menuTable = document.getElementById("Menu-data-Table");
menuButton.addEventListener("click", function() {
if (menuTable.style.display === "none") {
menuTable.style.display = "table";
menuButton.textContent = "Menu (Hide Table)";
} else {
menuTable.style.display = "none";
menuButton.textContent = "Menu (Show Table)";
}
});
});
</script>
</body>
</html>
Comments
Post a Comment