Olá pessoal tudo bom, hoje tivemos um desafio aqui no trabalho, que foi criar um campo de busca simples e avançada, onde existisse um botão de “busca avançada” e ao ser clicado ele mostraria mais campos abaixo, como data, tipo e categoria.
Pensei muito em como criar isso de uma forma super simples, e como sou um ruim em Javascript, comecei a pensar em métodos alternativos para fazer essa abertura.
Então descobri que isso da para fazer com CSS ( sim, css é um lindo mesmo ) , de uma forma simples e fácil:
Como criar um campo abre e fecha para busca avançada com CSS
Código HTML:
<form class=”busca”>
<input type=”text” class=”search-field” name=”pergunta” value=”” id=”pergunta” placeholder=”Buscar”><button type=”submit” class=””> <i class=”icon-search”></i> </button>
<label class=’uhul’ for=”toggle-1″>Exibir campos avançados:</label><input type=”checkbox” id=”toggle-1″><div id=”mostra” class=”busca-avancada”>
<div class=”lado”>
<label>Data inicial:</label>
<input type=”date” class=”data” name=”datainicio” value=”” id=”datainicio”>
</div>
<div class=”lado”>
<label>Data Final:</label>
<input type=”date” class=”data” name=”datafim” value=”” id=”datafim”>
</div></div></form>
Códigos CSS:
input#toggle-1 {
width: auto !important;
}#toggle-1 {
display:none;
}.uhul {
-webkit-appearance: push-button;
-moz-appearance: button;
display: inline-block;
cursor: pointer;
padding: 5px;
}/* CSS padrão da div */
#mostra {
display:none;
}/* CSS quando o checkbox está marcado */
#toggle-1:checked ~ #mostra {
display:block !important;
}
label.uhul {
background: #f4f4f4 !important;
border: none !important;
font-size: 80%;
padding: 10px;
}
div#mostra {
padding: 10px 20px;
background: #f4f4f4;
margin: 10px 0 40px;
border: 1px solid #ccc;
min-height:200px;
}
Temos 2 elementos importantes aqui, a Label com checkbox para ser selecionada #toggle-1 e o elemento DIV com os campos escondidos dentro, cujo o ID é #mostra , o segredo está nesta linha: #toggle-1:checked ~ #mostra onde uma vez que o checkbox seja selecionado ele vai modificar a classe do #mostra, realmente é um poder muito grande com CSS e que permite abrir muitas portas!
Uma coisa legal é que o Samuel que trabalha aqui comigo, manja de javascript, e enquanto eu fui fazendo com CSS ele foi fazendo com Javascript, terminamos praticamente juntos, com duas soluções, porém com tecnologias diferentes, eu achei muito bacana e pedi a autorização dele para publicar o código dele aqui no meu artigo:
Como criar um campo abre e fecha para busca avançada com Javascript:
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Pesquisa avançada</title> | |
<meta charset=“utf-8“ /> | |
<style> | |
label { | |
clear: both; | |
display: block; | |
} | |
form > div { | |
padding: 10px 0; | |
} | |
.pAvancada { | |
display: none; | |
} | |
</style> | |
</head> | |
<body> | |
<h1>Formulário de busca avançada</h1> | |
<form method=“post“ action=“dados.php“> | |
<div> | |
<label>Termo de pesquisa:</label> | |
<input type=“text“ name=“txtpesquisa“ required /> | |
</div> | |
<div> | |
<a href=“#“ onclick=“mostrar()“>Pesquisa avançada</a> | |
</div> | |
<div class=“pAvancada“> | |
<label>Tipo:</label> | |
<select name=“slcTipo“ required> | |
<option value=“1“>Pergunta e resposta</option> | |
<option value=“2“>Só pergunta</option> | |
<option value=“3“>Só resposta</option> | |
</select> | |
</div> | |
<div class=“pAvancada“> | |
<label>Data inicial:</label> | |
<input type=“date“ name=“dtInicial“ required /> | |
</div> | |
<div class=“pAvancada“> | |
<label>Data Final:</label> | |
<input type=“date“ name=“dtFInal“ required /> | |
</div> | |
<div> | |
<input type=“submit“ value=“Pesquisar“ /> | |
</div> | |
</form> | |
<script> | |
function mostrar() { | |
var input = document.getElementsByClassName(“pAvancada“); | |
for(i=0; i< input.length; i++) { | |
if(input[i].style.display == “none“) { | |
input[i].style.display = “block“; | |
} else { | |
input[i].style.display = “none“; | |
} | |
} | |
} | |
</script> | |
</body> | |
</html> |
Fonte: https://github.com/samuelsantos99/pesquisaAvancada/blob/master/index.html
E assim eu termino o meu artigo e deixo duas soluções para você que está precisando esconder e mostrar elementos de forma fácil e rápida! Espero do fundo do meu coração que esse artigo seja útil para a sua carreira e some conhecimento para você!
Um abraço e obrigado por estar aqui!
Desejo o seu sucesso!!
Eduardo Salerno
Confira meus ultimos trabalhos:
Site para Arquitetura
Site para Vereador
Site para Balada Russa
Site para Balada
Site para Balada
Site para Empresa de Takoyaki
Site para Agência de Intercâmbio
Site Corporativo para Empresa de Tecnologia
TENHA UM SITE COM TECNOLOGIA DE PONTA E COM UM EDITOR EXCLUSIVO!