1

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;">&#9776;</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;
}
1
  • Deberias agregar tu HTML.
    – alanfcm
    el 20 nov. 2018 a las 15:32

1 respuesta 1

3

Al final, lo que hace el método toggle es alternar el display del elemento entre block y none, si no me equivoco. La forma más rápida y con menos código sería utilizar los métodos de show y hide.

Lo que he entendido del código sin el html es que, al hacer click en #lupa-responsive debe mostrarse #buscar-responsive y ocultarse #dirección-responsive y al hacer click en #apuntador-responsive al revés.

$('#lupa-responsive').click(function(){
    $("#direccion-responsive").hide();
    $("#buscar-responsive").show();
});

$('#apuntador-responsive').click(function(){
     $("#buscar-responsive").hide();
     $("#direccion-responsive").show();
 });

Obviamente faltaría el resto de tu código.

Si lo he entendido mal, sería cambiar las funciones. show() mostrará el elemento y hide() lo ocultará, como sus nombres indican.

1
  • Muchas gracias. Funciono perfectamente. el 20 nov. 2018 a las 15:47

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.