How to create a panel that Displays/Hides fields using Html/Bootstap/Javascript

Question

I need to implement on a screen, a search panel that needs to appear when I click the button (Advanced Search) and within that panel there should be a "Close" button that, when clicked, will hide the same... How do I do it?

//Hidden Panel

//Visible panel

//Button code

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

Answer 1

One of the ways to do it is by using jQuery in a simple way with the method 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>

Answer 2

I made an option with jQuery that can meet you. It makes a .slideToggle() in the advanced search form. As it seems that you are using BS4 I put the css of this framework, but it works in any environment that has 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>