Ocultar y poner visibles divs por separado

[ceaped]

Buenas noches

Tengo este código:

Código Javascript:

<script type="text/javascript">
    jQuery(document).ready(function() {
    jQuery('.bloque_activador_zonas').click(function() {
    jQuery('.menu_zonas').slideUp('normal');
    if(jQuery(this).next().is(':hidden') == true) {
    jQuery(this).next().slideDown('normal');
    } 
          
    });
        
    });
</script>
 

Me oculta y me pone visible una DIV (funciona bien).

Integré otro btn para ocultar otra DIV:

Código Javascript:

<script type="text/javascript">
    jQuery(document).ready(function() {  
    jQuery('.menu_adicional').click(function() {              
    jQuery('.menu_footer').slideUp('normal');  
    if(jQuery(this).next().is(':hidden') == true) {                       
    jQuery(this).next().slideDown('normal');
    } 
          
    });
        
    });
</script>
 

Pero sólo la oculta cuando vuelvo a presionar el btn no me pone visible la DIV

¿Cómo hago para que me funcione cada btn para ocultar cada DIV ó como integro ambos códigos?

Gracias por su ayuda

[elporfirio]

Mira falta que nos pongas el HTML, (Sin CSS o lo minimo)

Para saber como esta tu menu construido.. ¿porque? Es muy sencillo.

Si lo hacemos muy especifico, cada vez que agregues un menu hay que cambiarlo todo.
Y si lo hacemos muy general puede no funcionar.

como tal la union de tus dos códigos es esta:

Código Javascript:

jQuery(document).ready(function() {
  jQuery('.bloque_activador_zonas').click(function() {
    jQuery('.menu_zonas').slideUp('normal');
    jQuery('.menu_footer').slideUp('normal');
   
    if(jQuery(this).next().is(':hidden') == true) {
      jQuery(this).next().slideDown('normal');
    } 
  });
 
  jQuery('.menu_adicional').click(function() {              
    jQuery('.menu_footer').slideUp('normal');
    jQuery('.menu_zonas').slideUp('normal');
    
    if(jQuery(this).next().is(':hidden') == true) {                       
      jQuery(this).next().slideDown('normal');
    } 
  });
});
 

Obviamente sin probarlo por que no se como este el HTML.

Saludos

===
https://blog.elporfirio.com

[ceaped]

Hola elporfirio
Tienes toda la razón. Mira te pongo la estructura:

Tengo 1 botón que me cierra un menú:

Código Javascript:

<script type="text/javascript">
    jQuery(document).ready(function() {
    jQuery('.bloque_activador_zonas').click(function() {
    jQuery('.menu_zonas').slideUp('normal');
    if(jQuery(this).next().is(':hidden') == true) {
    jQuery(this).next().slideDown('normal');
    } 
          
    });
        
    });
</script>
 

Código HTML:

<div class="bloque_activador_zonas" title="Ocultar menú"></div>
 

Código CSS:

.bloque_activador_zonas:before {
    font-family: 'Maven Pro', sans-serif;
    font-size: 18px;
    color: #757575;
    line-height: 10px;
    text-align: center;
    text-indent: 0px;
    text-decoration: none;
    content: "Encuentra Restaurantes por Zonas";
    width: 625px;
    height: 10px;
    display: block;
    margin: 10px auto 10px auto;
    background-color: transparent;
    
    background: url("../images/iconos_menu/menu_2.svg") no-repeat right;
    background-size: contain;
    }
 
.bloque_activador_zonas:hover, .bloque_activador_zonas:active {
    width: 625px;
    height: 10px;
    margin: 10px auto 10px auto;
    
    background: url("../images/iconos_menu/menu_2_hover.svg") no-repeat right;
    ackground-size: contain;
    }
 

El funciona bien.
Ahora deseo poner otro botón con las mismas características que oculte y ponga visible un menú.
(Pero en este caso que el menú este oculto al inicio).

Yo que hice?. Te pongo la estructura:

Código Javascript:

<script type="text/javascript">
    jQuery(document).ready(function() {
     
    jQuery('.menu_adicional').click(function() {
                  
    jQuery('.menu_footer').slideUp('normal');  
    if(jQuery(this).next().is(':hidden') == true) {                       
    jQuery(this).next().slideDown('normal');
    } 
          
    });
        
    });
</script>
 

Código HTML:

<div class="menu_adicional" title="Menú adicional"></div>
 

Código CSS:

.menu_adicional:before {
    content: "";
    width: 30px;
    height: 30px;
    margin: 10px;
    position: absolute;
    top: 0px;
    right: 0px;
    
    background: url("../images/iconos_menu/menu_3.svg") no-repeat right;
    background-size: contain;
    }
 
.menu_adicional:hover, .menu_adicional:active {
    background: url("../images/iconos_menu/menu_3_hover.svg") no-repeat right;
    ackground-size: contain;
    }
 

Que sucede?, que para el botón "menu_adicional" me cierra el menú pero no me lo abre.

¿Cómo hago para este menú me abra y cierre como el "bloque_activador_zonas" (teniendo en cuenta que "menu_adicional" deseo que este cerrado al cargar la página?

Gracias por tu ayuda

[ceaped]

Hola elporfirio
No logro resolver mi problema.
Me puedes dar una mano con este tema. Gracias

[ceaped]

Hola elporfirio
No logro que me trabajen por separado.
Me puedes ayudar.

Gracias por tu ayuda

[ceaped]

El código que tu pones:

Código Javascript:

<script type="text/javascript">
jQuery(document).ready(function() {
  jQuery('.bloque_activador_zonas').click(function() {
    jQuery('.menu_zonas').slideUp('normal');
    jQuery('.menu_footer').slideUp('normal');
   
    if(jQuery(this).next().is(':hidden') == true) {
      jQuery(this).next().slideDown('normal');
    } 
  });
 
  jQuery('.menu_adicional').click(function() {              
    jQuery('.menu_footer').slideUp('normal');
    jQuery('.menu_zonas').slideUp('normal');
    
    if(jQuery(this).next().is(':hidden') == true) {                       
      jQuery(this).next().slideDown('normal');
    } 
  });
});
</script>
 

Cuando presiono cualquiera de los dos botones me cierra ambas divs.
Yo quiero que ".menu_adicional" cuando cargue la pagina no esté visible y que cuando de clic en el botón "menu_adicional" se abra (tipo el menú de google, el que está en la parte superior derecha).

Gracias por tu ayuda