Hiding and displaying a form using a link

Question

Hiding and displaying a form using a link

Navigation

#1 by (2 votes)

0

I have a link and a form that needs to work as follows: When I click on the link, the form is visible and one more click on the form link is hidden.

classe of the link to hide and display the form is: menu_propaganda_guia_comercial_exibir and the form class to receive these actions 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;
}

javascript html css

asked by anonymous 21.07.2017 / 01:05

1 answer

Service Bus - Performance Test with Service Bus [closed] Include PHP and directories?

score 2 · Accepted Answer

A very simple solution is to assign a function to the click event of the desired element and control the value of the display attribute of the form. To do this, you can use a control variable that defines whether or not the form is visible, by 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>