Cómo ocultar html div

Question

Estoy desarrollando una pequeña aplicación en Ruby-On-Rails. Quiero ocultar un div en un archivo html.erb hasta que se haga clic en un enlace. ¿Cuál es la forma más simple de hacer esto?

Answer 1

En su archivo html:

<a href="#" id="show_whatever">Show Whatever</a> 
<div id="whatever" class="hidden">...</div> 

En su archivo CSS:

div.hidden { display: none; } 

En un incluirse archivo javascript, o en el interior de <script> etiquetas:

$(function() { 
    $('a#show_whatever').click(function(event){ 
    event.preventDefault(); 
    $('div#whatever').toggle(); 
    }); 
}); 

La clase hidden está ocultando el div. La función jQuery está haciendo una lista para un clic en el enlace, luego impide que se siga el enlace (event.preventDefault() evita que se explore a #) `y, por último, alternar la visibilidad del div.

Consulte la API de jQuery para click() y toggle().

Answer 2

Puede aplicar los estilos display:none o opacity:0. El primero hará que el div no ocupe ningún lugar en su página, mientras que el segundo lo hará no visible, pero aún conservará su lugar. Se podría decir que el primero lo oculta, mientras que el segundo apenas lo enmascara. Puede haber otras soluciones, pero esas son las dos que conozco.

Answer 3

Esto es fácil con javascript. Por ejemplo, utilizando la biblioteca jQuery javascript, puede alternar fácilmente si aparece un div en función de un enlace, como se muestra aquí. http://jsfiddle.net/Yvdnx/

HTML:

<a href="#">Click Me To Display Div</a> 
<div>Foo</div>​ 

Javascript:

$(function() { 
    $("div").hide(); 
    $("a").click(function(event) { 
     event.preventDefault(); 
     $("div").toggle(); 
    }); 
});​ 

jQuery es fiable y funciona a través de muchos navegadores, que lo diferencia de uso de selectores CSS3 como :target.