Two actions on the same button

Asked

Viewed 678 times

1

I would like to know if for example there is a way to do the following:

Click on a button and the form, and click again on the same button and the form close.

I’m sorry I can’t explain very well, I hope you can understand.

javascript
  • 1

    Guilherme, the answer you accepted solved your problem? We can assume then that the question is also related to Javascript?

1 answer

1


Below is an example I made with Javascript fadeIn or fadeOut to make it simpler to understand.

Explaining:

The operation is very simple, when the button receives a click it calls a function that executes a conditional switch case which will open or close the form, depending on the value of the variable estado declared in global scope in order to be changed smoothly, the default of hers is false because initially the form is closed.

var estado = false;

function abreFecha() {
  var frm = document.querySelector("#frm");

  switch (estado) {
    case true:
      frm.style.display = "none";
      estado = false;
      break;

    case false:
      frm.style.display = "block";
      estado = true;
      break;
  }

}
* {
  margin: 0;
  padding: 0;
}
#frm {
  display: none;
  width: 50%;
  height: 50%;
  background: #ccc;
  position: absolute;
  left: 25%;
  top: 25%;
  padding: 2%;
  box-sizing: border-box;
  overflow: auto;
}
input,
textarea {
  width: 100%;
  margin-bottom: 20px;
  box-sizing: border-box;
}
<button onclick="abreFecha()">Abrir Formulário</button>

<form id="frm">
  <h2>Formulario</h2>
  <hr><br>
  <span>Nome:</span>
  <br>
  <input type="text">
  <br>

  <span>Email:</span>
  <br>
  <input type="text">
  <br>

  <span>Mensagem:</span>
  <br>
  <textarea></textarea>
  <br>
  <button>Enviar</button>
</form>

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.