Ocultar y poner visibles divs por separado

[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