Event with onclick

Question

I am styling an input/search field using the onclick of javascript, I can do 50% but the rest I’m cracking my head and I don’t know what to do.

I was able to make the text input box to make the search appear only when I click the button.

But I need that by clicking again on the button or any other corner of the screen that was not in the search field, automatically the search field would hide again, do the same effect to display, but in reverse.

Ex search box:

Code:

$('#imagembusca').click( function() {
  $("#busca").attr('style', 'width: 200px; transition: all 0.5s linear; border-radius: 0 20px 20px 0; padding:0 10px 0 30px;');
});

#btbusca{
	max-width:250px;
	height: 30px;
	padding: 0;
}
#imagembusca{
	background:#FF0004;
	color: #FFFFFF;
	border-radius: 20px;
	width: 15px;
	height: 15px;
	padding: 7.5px 12px;
	display: inline-block;
	position: absolute;
	z-index: 1;
}
#imagembusca:hover{
	background: #B00002;
	transition: all 0.5s linear;
}
#busca{
	background:#EEE;
	width: 0px;
	line-height:30px;
	display: inline-block;
	position: absolute;
	margin: 0 0 0 15px;
	transition: all 0.5s linear;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="btbusca">
				<img src="https://www.sccpre.cat/mypng/full/51-514569_dibujo-lupa-png-desenho-lupa-para-colorir.png" id="imagembusca" alt="buscar" />
				<input type="search" name="busca" id="busca" placeholder="Buscar">
			</div>

Answer 1

It’s easier to create a class and use .toggleClass() at the click of the button. For example, you create a class and place the properties of the style:

#busca.aberto{
   width: 200px;
   transition: all 0.5s linear;
   border-radius: 0 20px 20px 0;
   padding:0 10px 0 30px;
}

Each time the button is clicked will open or hide the search field.

And to hide the field by clicking anywhere on the screen, you use the code below to remove the class from the field:

$(document).click(function(){
   $("#busca").removeClass('aberto');
});

But you gotta use event.stopPropagation() button not to call the $(document):

$('#btbusca').click( function(e) {
   e.stopPropagation();
});

It will stay this way:

$('#imagembusca').click(function(){
   $("#busca").toggleClass('aberto');
});

$('#btbusca').click( function(e) {
   e.stopPropagation();
});

$(document).click(function(){
   $("#busca").removeClass('aberto');
});

#btbusca{
	max-width:250px;
	height: 30px;
	padding: 0;
}
#imagembusca{
	background:#FF0004;
	color: #FFFFFF;
	border-radius: 20px;
	width: 15px;
	height: 15px;
	padding: 7.5px 12px;
	display: inline-block;
	position: absolute;
	z-index: 1;
}
#imagembusca:hover{
	background: #B00002;
	transition: all 0.5s linear;
}
#busca{
	background:#EEE;
	width: 0px;
	line-height:30px;
	display: inline-block;
	position: absolute;
	margin: 0 0 0 15px;
	transition: all 0.5s linear;
}

#busca.aberto{
   width: 200px;
   transition: all 0.5s linear;
   border-radius: 0 20px 20px 0;
   padding:0 10px 0 30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="btbusca">
   <img src="https://www.sccpre.cat/mypng/full/51-514569_dibujo-lupa-png-desenho-lupa-para-colorir.png" id="imagembusca" alt="buscar" />
   <input type="search" name="busca" id="busca" placeholder="Buscar">
</div>

Answer 2

use the Onblur! method so you catch the event by taking the focus of the element!