Como criar um campo abre e fecha para busca avançada com CSS ou Javascript

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

Facebook

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

EnglishItalianJapanesePortugueseSpanish
WhatsApp chat