Question: I am trying to make a simple pop-up form onClick but I don't want it to show and then hide I want hidden -> show I used this:
<https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_toggle_hide_show>
I set
`display: none;`

I tried swapping the if statements even but none of it worked:

```
        <script>
        function show() {
          var x = document.getElementById("box");
          if (x.style.display === "none") {
            x.style.display = "block";
          } else {
            x.style.display = "none";
          }
        }
        </script>
<button onclick="show()">Sign-in/Log-in</button> 
    <!-- Login Pop-up -->
    <form id="box" method="post">
        <input id="text" type="text" name="user_name"><br><br>
        <input id="text" type="password" name="password"><br><br>

        <input id="button" type="submit" value="Login"><br><br>

        <a>Don't have an account? Sign-up </a>
    </form>

```

Styles

```
button {
    margin-left: 20px;
    padding: 9px 25px;
    color:white;
    background-color: #eb266e;
    border: none;
    border-radius: 50px;
    cursor: painter;
    transition: all 0.3s ease 0s;
}

button:hover {
    color: #eb266e;
    background-color: white;
    border: 1px solid #eb266e;
}

#box {
    border: solid 1px black;
    width: 200px ;
    padding: 50px 0;
    text-align: center;
    background-color: lightblue;
    margin-top: 20px;
}

```

Answer: 
The function toggle on the classList of an element is useful here.

Just set up a class called say 'hide' which sets display none, set the box to have that class initially so it's not seen on load.

Then toggle that class on each click of the button.

```js
function showunshow() {
  document.getElementById("box").classList.toggle('hide');
}
```

```css
button {
  margin-left: 20px;
  padding: 9px 25px;
  color: white;
  background-color: #eb266e;
  border: none;
  border-radius: 50px;
  cursor: painter;
  transition: all 0.3s ease 0s;
}

button:hover {
  color: #eb266e;
  background-color: white;
  border: 1px solid #eb266e;
}

#box {
  border: solid 1px black;
  width: 200px;
  padding: 50px 0;
  text-align: center;
  background-color: lightblue;
  margin-top: 20px;
}

.hide {
  display: none;
}
```

```html
<button onclick="showunshow()">Sign-in/Log-in</button>
<!-- Login Pop-up -->
<form id="box" method="post" class="hide">
  <input id="text" type="text" name="user_name"><br><br>
  <input id="text" type="password" name="password"><br><br>

  <input id="button" type="submit" value="Login"><br><br>

  <a>Don't have an account? Sign-up </a>
</form>
```
You can try this code ...

```
 function show(status){
    var tergetId=$(status).attr("tergetId");
    $("#"+tergetId+"").toggle("active");
  };

button {
    margin-left: 20px;
    padding: 9px 25px;
    color:white;
    background-color: #eb266e;
    border: none;
    border-radius: 50px;
    cursor: painter;
    transition: all 0.3s ease 0s;
}

button:hover {
    color: #eb266e;
    background-color: white;
    border: 1px solid #eb266e;
}

#box {
    border: solid 1px black;
    width: 200px ;
    padding: 50px 0;
    text-align: center;
    background-color: lightblue;
    margin-top: 20px;
    display: none;
}

<button onclick="show(this)" tergetId="box">Sign-in/Log-in</button> 
    <!-- Login Pop-up -->
    <form id="box" method="post">
        <input id="text" type="text" name="user_name"><br><br>
        <input id="text" type="password" name="password"><br><br>

        <input id="button" type="submit" value="Login"><br><br>

        <a>Don't have an account? Sign-up </a>
    </form>

```