CODEWITHSUNDEEP
javascripthtmlcss
Jeff Wright
Jeff Wright

Reputation: 1194

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

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>

Upvotes: 0

Views: 597

Answers (3)

Talha Jutt
Talha Jutt

Reputation: 56

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

Upvotes: 1

Deyan Petrov
Deyan Petrov

Reputation: 170

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>

Upvotes: 3

Laisender
Laisender

Reputation: 734

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>

Upvotes: 3

Related Questions