How to hide and display a form using a link

Question

I’m with a link and a form that need to work as follows: When I click on the link, the form is visible and with one more click on the link the form is hidden.

To classe the link to hide and display the form is: menu_propaganda_guia_comercial_exibir and the form class to receive these shares is: frm_enviar_email_gc

HTML

<nav class="menu_propaganda_guia_comercial">
            <ul>
                <li><a class="menu_propaganda_guia_comercial_exibir" href="#" title="Enviar e-mail">Enviar e-mail</a></li>
                <li><a href="#" title="Mais detalhes">Mais detalhes</a></li>
            </ul>
</nav>

<form class="frm_enviar_email_gc" action="#" method="post">
<h3>Solicitar Orçamento:</h3>
<input type="text" id="solicitacao_nome" class="intrada_frm_enviar_email_gc" placeholder="Nome">
<input type="email" id="solicitacao_email" class="intrada_frm_enviar_email_gc" placeholder="Email">
<input type="text" id="solicitacao_telefone" class="intrada_frm_enviar_email_gc" placeholder="Telefone">
<textarea class="intrada_frm_enviar_email_gc" id="solicitacao_msg" placeholder="Mensagem"></textarea>
<button class="intrada_frm_enviar_email_gc_enviar" type="submit">Enviar sua solicitação</button>
</form>

CSS

.menu_propaganda_guia_comercial{
  float: left;
  width: 100%;
  height: 54px;
}
.menu_propaganda_guia_comercial a{
  color:#ffffff;
  text-decoration: none;
  font-size: 18px;
}
.menu_propaganda_guia_comercial ul{
  margin: 0px;
  padding: 0px;
}
.menu_propaganda_guia_comercial ul li{
  float:left;
  width: 20%;
  display: inline;
  line-height: 25px;
  margin-right: 20px;
  background-color: #0E69A9;
  box-sizing: border-box;
  text-align: center;
}
.menu_propaganda_guia_comercial ul li:hover{
  background-color: #07385C;
  color: #fff;
  transition: all .4s;
}

.frm_enviar_email_gc{
  position: relative;
  float: left;
  width: 100%;
  max-width: 885px;
  height: auto;
  background-color: #F7FAFC;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  flex-wrap: wrap;
  border: 2px #0E69A9 solid;
  display: none;
}

.frm_enviar_email_gc{
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
}

.intrada_frm_enviar_email_gc{
  width: 100%;
  font-size: 20px;
  padding: 10px;
  box-sizing: border-box;
  margin-top: 10px;
}

.intrada_frm_enviar_email_gc_enviar{
  width: 100%;
  font-size: 20px;
  padding: 10px;
  box-sizing: border-box;
  margin-top: 10px;
  background-color: #B4D1E4;
  border: 0px;
}

.intrada_frm_enviar_email_gc_enviar:hover{
  background-color: #0E69A9;
  color: #fff;
}

.frm_enviar_email_gc h3{
color: #333;
font-size: 20px;
text-transform: uppercase;
}

Answer 1

A very simple solution is to assign a function to the event click of the desired element and control the value of the attribute display of the form. To do this, you can use a control variable that defines whether the form is visible or not, always reversing this variable in the link event.

See an example below:

// Objetos do DOM:
const link = document.querySelector(".menu_propaganda_guia_comercial_exibir");
const form = document.querySelector(".frm_enviar_email_gc");

// Variável que define se o formulário está, ou não, visível:
let formIsVisible = true;

// Controla o evento `click` do link:
link.addEventListener("click", function (event) {

  // Inverte o estado do formulário:
  formIsVisible = !formIsVisible;

  // Atualiza o valor da propriedade de acordo com o novo estado:
  form.style.display = (formIsVisible ? "block" : "none");

});

<nav class="menu_propaganda_guia_comercial">
  <ul>
    <li><a class="menu_propaganda_guia_comercial_exibir" href="#" title="Enviar e-mail">Enviar e-mail</a></li>
    <li><a href="#" title="Mais detalhes">Mais detalhes</a></li>
  </ul>
</nav>

<form class="frm_enviar_email_gc" action="#" method="post">
  <h3>Solicitar Orçamento:</h3>
  <input type="text" id="solicitacao_nome" class="intrada_frm_enviar_email_gc" placeholder="Nome">
  <input type="email" id="solicitacao_email" class="intrada_frm_enviar_email_gc" placeholder="Email">
  <input type="text" id="solicitacao_telefone" class="intrada_frm_enviar_email_gc" placeholder="Telefone">
  <textarea class="intrada_frm_enviar_email_gc" id="solicitacao_msg" placeholder="Mensagem"></textarea>
  <button class="intrada_frm_enviar_email_gc_enviar" type="submit">Enviar sua solicitação</button>
</form>