HREF de ocultar/mostrar div

[alejandromaringomez]

Hola amigos,
Estoy haciendo una web para un cliente que es abogado y quiere crear una página llamada "Enlaces de interés", y tengo el siguiente código:

Código:

<div id="caja">
					<a href="" onclick="muestra_oculta('#caja_5'); return false;" class="titulo"><span>Ayuntamientos</span></a>
					<div class="contenido" id="caja_5" style="display: none;">
						<p>En pruebas</p>
					</div>
				</div>

Y me gustaría que al hacer click en ese a href según conforme esté sirva para abrir y cerrar el div, en caso que mueste el caja_5 al hacer click se cierre, y si está cerrado que se abra, pero no con display, a ser posible con el efecto slideUp o slideDown.

Agradezco de antemano a todos :))

Muchas Gracias.

[IsaBelM]

este es un código antiguo. pero es lo que buscas
http://www.forosdelweb.com/f53/menu-...9/#post3994391

[alejandromaringomez]

¡Hola IsaBelM! ,
Muchas gracias por el codigo :), pero tengo uno algo similar que es el que uso hasta el momento que es este:

estado_mostrar_ocultar = 0; // undefined es como NULL en php

// Ejecutamos el script

function muestra_oculta(id) {

// Comprobamos el estado con el que debemos accionar

if(estado_mostrar_ocultar==0) {

// Mostramos la capa

$(id).slideUp('fast');

// Guardamos el estado nuevo para que a la próxima vez se oculte

estado_mostrar_ocultar = 1;

} else {

// Ocultamos la capa

$(id).slideDown('fast');

// Guardamos el estado nuevo para que a la próxima vez se muestre

estado_mostrar_ocultar = 0;

}

}

La cuestión por la que busco una manera algo mas sencilla es porque al hacer click al a no va, hay que hacerle dos clicks para que funcione, creía que era fallo de ponerlo en el onclick y probé a poner la llamada en el href, pero no hay diferencia...

Muchas gracias :)

[javierflti]

¿estás mezclando jquery con javascript no?
Si es así, yo haría lo siguiente
Añadiría un id al enlace, por ejemplo id="enlace_ayuntamiento"
Y luego esta función jquery, que la puedes añadir al final del archivo o en otro archivo diferente

Código Javascript:

<script type="text/javascript">
    $(function() {
        $('#enlace_ayuntamiento').click(function() {
            if($('#caja_5').is(':visible')) {
                $('#caja_5').hide(800);
            }else {
                $('#caja_5').show(800);
            }
        });
    });
</script>
 

Espero que te sirva

[alejandromaringomez]

¡Hola javierflti! ,
Muchas gracias :), si lo que hago es eso, el problema en sí es que no hay una sola caja... Hay 50, por eso lo hago con functions, para cojer el nombre de la capa que la pueda indicar en el enlace, de esa manera me evito tener que crear 50 scripts por cajas, ¿Hay alguna manera con la que podamos hacer eso?.

Un saludo :)

[carscx]

Hola,

Lo que puedes hacer es una funcion en jquery, que sea abrir/ocultar caja. y a cada enlace añadir una clase que sea por ejemplo "abrecaja". A cada enlace le asignas un id único y un atributo "data" del tipo "data-caja-para-abrir" que sera el id del div que se muestra u oculta.

Despues con jquery, creas una funcion del tipo.

Código Javascript:

$(document).on("click", ".abrecaja", function(){
         var caja = $(this).attr("data-caja-para-abrir");
         mostrarOcultarCaja(caja);
});
 
var mostrarOcultarCaja = function(caja){
       if($("#"+caja).is(':visible')) {
                $("#"+caja).hide(800);
            }else {
                $("#"+caja).show(800);
            }
}
 

Espero que te sirva!

Saludos!

[caricatos]

Hola:

href debe ser un atributo con una url para enlazar (en etiquetas a, area... Si lo que interesa es el evento "click", hay etiquetas que semánticamente son más apropiadas.

... Y cuando te preocupes de cuestiones SEO, tendrás un problema menos.

Saludos

[carscx]

Iniciado por caricatos

Hola:

href debe ser un atributo con una url para enlazar (en etiquetas a, area... Si lo que interesa es el evento "click", hay etiquetas que semánticamente son más apropiadas.

... Y cuando te preocupes de cuestiones SEO, tendrás un problema menos.

Saludos

Esto no tiene nada que ver con SEO, en el href puede ir un ancla a oto Id y es completamente valido y semantico.

Saludos,

[caricatos]

Hola:

Iniciado por carscx

Esto no tiene nada que ver con SEO, en el href puede ir un ancla a oto Id y es completamente valido y semantico.

Saludos,

Reprocha todo lo que quieras, pero viendo el primer mensaje (con su código), y el título del tema, evidentemente la intención no es ni anclar ni enlazar...

Me da igual el vicio de los demás, y tampoco me importa que no me consideren estos consejos... luego el trabajo es mayor.

Saludos

[Pelydas]

Prueba con toogle(), algo así:

$(document).ready(function(){
$('.titulo').on ('click', function(){
$("#caja_5").toggle();
});
});

y es curioso y no se la razón pero has href = "#" porque si lo dejas href="" se muestra #caja_5 pero se oculta otra vez. Saludos.

[caricatos]

Hola:

Iniciado por Pelydas

...
y es curioso y no se la razón pero has href = "#" porque si lo dejas href="" se muestra #caja_5 pero se oculta otra vez. Saludos.

No es curioso sino semántico...
los dos casos son enlaces; cuando empieza por "#" el enlace es interno y por eso simplemente se navega dentro de la página... el otro enlace es externo y al no indicarse nada, el enlace es hacia la misma página... se resuelve de dos maneras, la que "no" recomiendo es cancelar el enlace, y la que creo más aconsejable es usar algún elemento sin ese peso semántico... un simple span por ejemplo... y evidentemente programar el evento click.

Saludos