Hi I am trying to show and hide depending on where I click. It is not generating any type of error.
The intention is that when I click it, the input is opened, which it does, but when I apply the if, else it does nothing, and when I click outside of it, it disappears.
$(document).ready(function(){
$("#lupa").on('click', function(){
//alert("Fue presionado.");
//$('#buscador-text').slideToggle('swing');
var buscador = $("#buscador-text").css;
if(buscador.display == 'none'){
buscador.animate({ width: "toggle", opacity: "1", left: '170px', display:'inline-block'}, "swing");
}
else if (buscador.display == 'inline-block') {
buscador.animate({ width: "toggle", opacity: "1", left: '70px', display:'inline-block'}, "swing");
}
});
});
#buscador{
width: 40%;
margin: 0.7em 4em;
font-size: 1.5rem;
}
input[type='search']{
font-size: 1rem !important;
margin-top: -0.8em;
position: absolute;
margin-left: -2em;
opacity: 0;
}
span{
padding-right: 1em;
}
#buscador-text{
display: none;
position: absolute;
}
<script defer src="https://use.fontawesome.com/releases/v5.0.2/js/all.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="buscador">
<span id="lupa"><i class="fas fa-search"></i></span><input id="buscador-text" type="search" name="buscador" placeholder="Buscar...">
</section>
You can do it this way:
You have two problems. First,
$("#buscador-text").css
it's not going to return a string. What you are really looking for is$("#buscador-text").css('display')
.Second, after the animation you give it, the object is left with
display:block
. (I don't understand why) so the equal to conditioninline-block
will never be met unless youanimate
explicitly set that property below.The following code works for me:
var browser = $("#text-browser").css("display"); if(finder == 'none'){ finder.animate({ width: "toggle", opacity: "1", left: '170px', display:'inline-block'}, "swing"); } else if (finder == 'inline-block') { finder.animate({ width: "toggle", opacity: "1", left: '70px', display:'inline-block'}, "swing") ; }); });