Jquery open a box with Toggle and close the other boxes

Question

Jquery open a box with Toggle and close the other boxes

Navigation

#1 by (3 votes)

1

I am doing with Jquery two buttons, when I click one of the two functions that are in the code below is displayed. How can I do so by clicking on the #lupa-responsive button the% #apuntador-responsive is closed if it is open and vice versa. Thank you very much

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;
}

javascript jquery

asked by Carlos Cespedes 20.11.2018 в 16:31

source

1 answer

Count repetitions of each letter in a string in C Uninstall Android Studio

score 3 · Accepted Answer

In the end, what the toggle method does is to toggle the display of the element between block and none , if I'm not mistaken. The fastest way with the least code would be to use the methods of show and hide .

What I understood of the code without the html is that, when you click on #lupa-responsive you should see #buscar-responsive and hide #dirección-responsive and click on #apuntador-responsive upside down.

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

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

Obviously the rest of your code would be missing.

If I misunderstood it, it would be to change the functions. show() will show the element and hide() will hide it, as their names indicate.