How to make HTML/CSS button appear above a table being hidden-CodePudding

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:

the "Show Environment" button should be above, not below the table;
the table should be hidden when the page first loads, and only display when the button is clicked.

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  style="font-size: normal;">
    <pre >
                <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>

CodePudding user response：

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>

CodePudding user response：

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  style="font-size: normal">
    <pre >
      <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>

CodePudding user response：

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