Two actions on the same button

Question

Two actions on the same button

Navigation

#1 by (1 votes)

1

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

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

I'm sorry I can not explain very well, I hope you can understand.

javascript

asked by anonymous 08.09.2015 / 13:59

1 answer

Is it possible to include allegro in a Kernel made in C? Automated Deploy - Version Maintenance for Multiple Clients

score 1 · Accepted Answer

Below is an example I made with pure Javascript and no effects of 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 switch case conditional that will open or close the form, depending on the value of the estado variable declared in global scope to be changed without problems, default of it is false because the form was initially 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>