1

Estou com um link e um formulário que precisam funcionar da seguinte forma: Quando eu clicar no link, o formulário fica visível e com mais um clique no link o formulário fica oculto.

A classe do link para ocultar e exibir o formulário é: menu_propaganda_guia_comercial_exibir e a classe do formulário para receber estas ações é: 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;
}
2
  • Se precisa do evento click, a solução será com JavaScript. Ok?
    – Woss
    Commented 20/07/2017 às 23:12
  • @AndersonCarlosWoss OK. Como se faz isso funcionar no meu código?
    – Gladison
    Commented 20/07/2017 às 23:15

1 Resposta 1

1

Uma solução bastante simples é atribuir uma função ao evento click do elemento desejado e controlar o valor do atributo display do formulário. Para tal, você pode utilizar uma variável de controle que define se o formulário está, ou não, visível, invertendo esta variável sempre no evento do link.

Veja um exemplo abaixo:

// 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>

9
  • Aqui não funciona! é para colocar entre as tags <script type="text/javascript"> </script>
    – Gladison
    Commented 20/07/2017 às 23:29
  • Obviamente que sim. Todo código JavaScript deve estar dentro das tags script.
    – Woss
    Commented 20/07/2017 às 23:30
  • Aqui não funciona! Não entendi
    – Gladison
    Commented 20/07/2017 às 23:30
  • Coloque seu código no jsfiddle.net e me mande o link.
    – Woss
    Commented 20/07/2017 às 23:32
  • Coloquei no jsfiddle.net e funcionou. Só não entendi como no site não funciona.
    – Gladison
    Commented 20/07/2017 às 23:36

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .