[SOLUCIONADO] Script para mostrar y ocultar un div

[diegoguerrero]

Código HTML:

<div id="h3-tec-bsm"> 
    Mis libros 
</div> 
<div id="tec-caja"> 
 Contenido 
</div> 

Tengo este código y me gustaría que cuando se haga click en el div h3-tec-bsm se oculte la tea-caja y, si se vuelve a clicar, que se muestre. No me hace falta que haga efectos ni nada de eso. Gracias.

[HumFaJ]

mira esto
script.js

Código Javascript:

$(document).ready(function(){
    $("#mostdiv").hide();
 
    $("#open_close").click(function(){
        $("#mostdiv").slideToggle();
    }) 
 
 })
 

insertalo en tu HTML asi

Código HTML:

<script type="text/javascript" src="script.js"></script>
 

en el id del div llama a la funcion "open_close"

Código HTML:

<div id="open_close">ver div al dar clic</div>
<div id="h3-tec-bsm"> 
    Mis libros 
</div> 
<div id="tec-caja"> 
 Contenido 
</div>
 

[Alexis88]

Puedes hacerlo mediante las propiedades display, visibility, opacity y height.

Código Javascript:

//Con display
elemento.style.display = "none";
 
//Con visiblity
elemento.style.visibility = "hidden";
 
//Con opacity
elemento.style.opacity = 0;
 
//Con height
elemento.style.height = 0;
 

La primera genera que el elemento no solo no sea visto, sino que no forme parte del documento. Como si no existiera.

La segunda solo lo vuelve invisible, pero el elemento seguirá allí, por lo que seguirá ocupando el mismo espacio que ocupaba cuando era visible.

La tercera vuelve opaco al elemento, al punto de que este deja de ser visible, pero sigue en el documento y ocupando el mismo espacio.

La cuarta le quita la altura, por lo que el elemento deja de ser visible, sin embargo, si no se le asigna un cero a su anchura, seguirá ocupando el espacio a lo ancho de siempre. También hay que tener en cuenta que si se le asignó un borde, este seguirá siendo visible incluso si el alto y ancho están establecidos en cero. Evidentemente, el elemento, al igual que en los casos dos y tres, permanece en el documento.

Un saludo

[diegoguerrero]

Buenas: muchas gracias por sus respuestas pero ninguna me ayuda. En el primer caso el script directamente no funciona y en el segundo, no respondiste lo que pregunté. Además, quería saber cómo hacer que si se pulsa se muestre y, si se vuelve a pulsar una sola vez se oculte (digo una sola vez porque lo hice con activadores de guiones onclick para mostrar y ondblclick para ocultar, pero es un poco incómodo).

[Alexis88]

En los ejemplos que te dejé para ocultar a un elemento, está la solución. Cuando des un clic, comprueba si el elemento es visible, para lo cual tienes a tu disposición las cuatro propiedades que te indiqué. Si el elemento es visible, lo ocultas; caso contrario, lo muestras.

¿Cómo lo harías?

Ya te indiqué cómo ocultarlo. Para mostrarlo, solo utiliza un valor contrario al que lo oculta.

¿Qué valores admiten?

• display
• visibility
• opacity
• height

Todo está en internet, solo tenías que buscar.

Un saludo