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

CONTEÚDO RELACIONADO