How to create a panel that displays / Hides fields using Html / Bootstap / JavaScript

Question

How to create a panel that displays / Hides fields using Html / Bootstap / JavaScript

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

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

// Hidden Dashboard

//Visiblepanel

//Buttoncode

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

javascript html5

asked by anonymous 05.07.2018 / 14:48

2 answers

0

I made an option with jQuery that can answer you. It does .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><buttonid="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>

05.07.2018 / 15:08

Bug multiples modals bootstrap Select with fields without values

score 1 · Accepted Answer

One way to do this is by using jQuery in a simple way with the toggle method.

$(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><buttonid="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>