Estoy haciendo con Jquery
dos botones, al hacer click se despliegauna de las dos funciones que están en el código de abajo. Como puedo hacer para que al hacer clic en el boton #lupa-responsive
se cierre el Boton #apuntador-responsive
si estuviera abierto y viceversa. Muchas gracias
function botonBuscarResponsive(){
var contador = 0;
$('#lupa-responsive').click(function(){
$("#buscar-responsive").toggle("slow");
$("#direccion-responsive").toggle("slow");
if(contador == 0){
$(".lupa-responsive").css({"background":"#90AA4D"});
contador = 1;
}else if(contador == 1){
$(".lupa-responsive").css({"background":"#D8D8D8"});
contador = 0;
}
});
}
function botonMapaResponsive(){
var contador = 0;
$('#apuntador-responsive').click(function(){
$("#direccion-responsive").toggle("slow");
});
}
HTML
<div class="header-barra-blanca-responsive">
<span style="font-size:30px;" class="icon" id="favicon" style="color:#ffffff;">☰</span>
<div class="lupa-responsive" id="lupa-responsive"><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/lupa.png" alt="Buscar"/></div>
<div class="header-direccion-responsive" id="apuntador-responsive"><img src="<?php echo get_home_url();?>/wp-content/uploads/2018/11/location_icono.png"></div>
</div>
<div class="buscador center" id="buscar-responsive"><?php echo get_search_form(); ?></div>
<div class="direccion-responsive" id="direccion-responsive"><span>AV Lorem ipsum Cll 13 96.</span> <a href="#">Ver mapa</a></div>
CSS
#buscar-responsive{
display:none;
width: 100%;
padding: 10px 0;
background: #90AA4D;
position: absolute;
top: 40px;
}
#buscar-responsive .search-form input[type="search"]{
background-color:#D8D8D8;
border: 1px solid #d1d1d1;
font: 18px Arial,Helvetica,Sans-serif;
color: #433f3f;
width: 90%;
padding: 6px 15px 6px 15px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
}
.header-barra-blanca-responsive{
display:block
}
.lupa-responsive{
background:#D8D8D8;
-webkit-border-radius: 50px;
border-radius: 50px;
padding: 5px;
width: 20px;
height: 20px;
position: absolute;
right: 39px;
top: 7px;
}
.lupa-responsive img{
width: 20px;
}
#direccion-responsive{
display:none;
width: 100%;
padding: 10px 0;
background: #90AA4D;
color: #ffffff;
position: relative;
top: 40px;
}
#direccion-responsive a{
text-decoration: none;
color: #D8D8D8;
cursor: pointer;
}
.header-direccion-responsive{
display: inline;
position: absolute;
right: 10px;
top: 10px;
}