Estou estilizando um 'input/campo de pesquisa' utilizando o onclick do javascript, consigo fazer 50% mas o restante estou quebrando a cabeça e não sei oque fazer.
Consegui fazer com que a caixa de entrada de texto para fazer a pesquisa apareça apenas quando clico no botão.
Mas preciso que ao clicar novamente no botão ou em qualquer outro canto da tela que não fosse no campo de pesquisa, automaticamente o campo de pesquisa se escondesse novamente, fizesse o mesmo efeito de exibir, porém ao contrário.
Caixa de busca ex:
Código:
$('#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>