1

Preciso implementar em uma tela, um painel de busca que precisa aparecer quando eu clicar no botão (Pesquisa Avançada) e dentro desse painel deverá ter um botão "Fechar" que, quando clicado, ocultará o mesmo... Como eu faço isso?

//Painel Oculto inserir a descrição da imagem aqui

//Painel visível inserir a descrição da imagem aqui

//Código do botão

<button id="btnPesquisaAvancada" type="button" class="btn btn-outline btn-default" data-toggle="tooltip"
		data-original-title="Pesquisa Avançada" data-container="body">
	<i class="icon wb-search" aria-hidden="true"></i>
	<span class="hidden-xs">Pesquisa Avançada</span>
</button>

2 Respostas 2

1

Uma das maneiras de se fazer é utilizando jQuery de uma maneira simples com o método toggle.

$(document).ready(function() {
  
   $(".divOculta").hide();
  
   $("#btnPesquisaAvancada").on("click", function() {
      $(".divOculta").toggle();
   })
  
})
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="btnPesquisaAvancada" type="button" class="btn btn-outline btn-default" data-toggle="tooltip"
		data-original-title="Pesquisa Avançada" data-container="body">
	<i class="icon wb-search" aria-hidden="true"></i>
	<span class="hidden-xs">Pesquisa Avançada</span>
</button>

<br><br>

<div class=" col-12 divOculta">
  <div class="form-group col-sm-6">
    <label for="sit">Situação</label>
    <input type="text" class="form-control" id="sit" placeholder="Enter email">
  </div>
  <div class="form-group col-sm-6">
    <label for="cad">Tipo de cadastro</label>
    <input type="text" class="form-control" id="cad" placeholder="Enter email">
  </div>
</div>

2
  • Obrigado pela ajuda @Leandro!!!
    – Master JR
    Commented 5/07/2018 às 14:34
  • Por nada man! :)
    – LeAndrade
    Commented 5/07/2018 às 14:55
0

Fiz uma opção com jQuery que pode te atender. Ele faz um .slideToggle() no form de busca avançada. Como parece que vc está usando o BS4 coloquei o css desse framework, mas funciona em qualquer ambiente que tenha jQuery

$("button").click(function(){
    $(this).toggleClass("ativo");
    $(".busca").slideToggle();
});
.busca{
    display: none;
 }
 .ativo {
     background-color: royalblue;
 }
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
    
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

     
         <button id="btnPesquisaAvancada" type="button" class="btn btn-outline btn-default" data-toggle="tooltip"
                 data-original-title="Pesquisa Avançada" data-container="body">
             <i class="icon wb-search" aria-hidden="true"></i>
             <span class="hidden-xs">Pesquisa Avançada</span>
         </button>
     
        <form class="busca">
            <div class="form-row">
                <div class="col">
                <input type="text" class="form-control" placeholder="First name">
                </div>
                <div class="col">
                <input type="text" class="form-control" placeholder="Last name">
                </div>
            </div>
        </form>
           

5
  • Obrigado pela ajuda @hugocsl... O painel está aparecendo aberto. Como que eu faço para mantê-lo sempre fechado e aparecer somente quando clicado no botão Pesquisa avançada?
    – Master JR
    Commented 5/07/2018 às 14:33
  • @JalberRomano repare que tem um CSS que faz o display:none no elemento que vai conter o form do "busca avançada" dentro. Então basta vc colocar um classe .busca{ display: none; } por exemplo no elemento que tem o forme dentro e depois usar o script para fazer o toggle tipo $(".busca").slideToggle(); Repare que eu Editei a minha resposta para ficar melhor o entendimento.
    – hugocsl
    Commented 5/07/2018 às 14:39
  • @JalberRomano resumindo, então o .busca já começa com o display:none e depois vc faz o toggle com o jQuery. Inclui no .css a regra para usar para esconder e depois fazer a referencia no script quando clicar no btn. Mas qq dúvida é só falar que te dou uma força se precisar de mais alguma explicação.
    – hugocsl
    Commented 5/07/2018 às 14:41
  • Ah simmmm, não tinha reparado que no css estava o "display: none;"....
    – Master JR
    Commented 5/07/2018 às 14:43
  • @JalberRomano sim tem que usar pra esconder no inicio, boa sorte com o projeto!
    – hugocsl
    Commented 5/07/2018 às 14:47

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 .