I am a novice when it comes to HTML, CSS and JS. I have the following code snippet in which I am trying to show/hide a table. I have two problems with it:
I've been looking over the code and I am not able to figure out why these two issues are happening. Can anyone see the problem(s)?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Report</title>
<style type="text/css">
.table-content {
display: inline;
white-space: pre-wrap;
word-wrap: break-word;
}
.body_foreground {
color: #000000;
}
.body_background {
background-color: #EEEEEE;
}
.content {
display: none;
overflow: hidden;
}
</style>
</head>
<body class="body_foreground body_background" style="font-size: normal;">
<pre class="table-content">
<h1>html_report</h1 s>
<table id="environment">
<tr>
<td>Base Version</td>
<td>6.0.1</td>
</tr>
<tr>
<td>Extended Version</td>
<td>5.14.0</td>
</tr>
<tr>
<td>Project Version</td>
<td>36</td>
</tr>
</table>
<div>
<input type="button" id="env_button" onclick="toggle_env()" value="Show Environment" />
</div>
</div>
<script type="text/javascript"> function toggle_env() { var content = document.getElementById("environment"); if (content.style.display === "block") { content.style.display = "none"; } else { content.style.display = "block"; } } </script>
</pre>
</body>
</html>
Your button is under the table so just bring it up. I've removed an extra div. Renamed your h1 tag. and removed the style from the CSS and added it within the JS as it was acting up not sure why.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Report</title>
<style type="text/css">
.table-content {
display: inline;
white-space: pre-wrap;
word-wrap: break-word;
}
.body_foreground {
color: #000000;
}
.body_background {
background-color: #eeeeee;
}
.content {
display: none;
overflow: hidden;
}
</style>
</head>
<body class="body_foreground body_background" style="font-size: normal">
<pre class="table-content">
<div>
<!-- moved button to the top--> <input type="button" id="env_button" onclick="toggle_env()" value="Show Environment" />
</div>
<h1>html_report</h1> <!-- You had an </h1 s> -->
<table id="environment">
<tr>
<td>Base Version</td>
<td>6.0.1</td>
</tr>
<tr>
<td>Extended Version</td>
<td>5.14.0</td>
</tr>
<tr>
<td>Project Version</td>
<td>36</td>
</tr>
</table>
</pre>
<script type="text/javascript">
const content = document.getElementById("environment");
content.style.display = "none"; // set default state to hidden
function toggle_env() {
if (content.style.display === "none") {
content.style.display = "block";
} else {
content.style.display = "none";
}
}
</script>
</body>
</html>
First, you need to move the button outside the table. Otherwise the button will always be hidden when the table is hidden.
Then you can use Javascript to hide the table until the button is clicked.
Here is an example:
// Javascript
let table = document.getElementById('table')
let button = document.getElementById('button')
button.addEventListener('click', () => {
if(table.hidden) {
table.hidden = false
button.innerHTML = 'Close Environment'
}else{
table.hidden = true;
button.innerHTML = 'Open Environment'
}
})/* CSS */
table, th, td {
padding: 0.5rem 1rem;
border: 1px solid black;
border-collapse: collapse;
}
button {
border: none;
padding: 3px;
margin-bottom: 1rem;
}<!-- HTML -->
<button id="button">Open Environment</button>
<table id="table" hidden>
<tr>
<td>Lorem</td>
<td>Ipsum</td>
</tr>
</table>As for how to make the button appear above your table you can just move your div above the table element. Like this:
<div>Your div with input element</div>
<table></table>
As for the reason why your table appears when page first loads is that you have declared a wrong CSS rule for it. You have:
.content{
display: none;
overflow: hidden;
}
Instead it should be:
#environment{
display: none;
overflow: hidden;
}
Hope this is helpful