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;
}