Ocultando capas para mostrar información
El otro día me encontré con el problema de mostrar demasiada información, que necesariamente tenía que proporcionar al usuario.
En este caso no era una opción hacer una vista de detalle del elemento, así que se me ocurrió que esos datos de consulta rápida se pudieran ver de ser necesario, pero que por defecto no molestaran haciendo la página demasiado larga.
Nos vamos a valer de CSS para meter el contenido en una capa 'invisible' de tamaño 0 pixeles (para que no se vea y no ocupe espacio), y con una sencilla función en Javascript cambiaremos entre ese estado y 'visible' con tamaño igual al elemento que contiene la capa encapsulada.
Veamos un ejemplo encapsulando una zona de código: [ mostrar / ocultar ]
<script type="text/javascript">
function show(item)
{
var contenedor=document.getElementById('contenedor'+item)
var contenido=document.getElementById('contenido'+item)
if(contenedor.style.visibility=='hidden')
{
contenedor.style.visibility='visible'
contenedor.style.height=contenido.style.height
}
else
{
contenedor.style.visibility='hidden'
contenedor.style.height='0px'
}
}
</script>
<p>[ <a href="javascript: show(0)">mostrar / ocultar</a> ]</p>
<div id="contenedor0" style="visibility:hidden; height:0px">
<pre id="contenido0">
Este es el contenido...
</pre>
</div>
La capa contenedora tiene que tener las propiedades: visibility:hidden y height:0px (o no si queremos que por defecto la zona sea visible).
Además hay que tener en cuenta que es el contenido lo que nos indica el tamaño de la capa contenedora, así que será necesario que empleemos otra capa extra para agrupar el contenido en caso de que sean varios elementos. En el ejemplo es solo un elemento pre, así que no ha sido necesario.
La verdad es que es muy sencillo, aunque no sé si es la mejor forma de hacerlo ;).
Funciona en Firefox, y no veo porqué no debería funcionar en otros navegadores modernos (a ver si los lectores de este blog me lo confirman :P).
Actualización: Como me cuentan aquí, una forma más límpia de hacerlo sería usando display con none y block (o inline, según corresponda).
Hay 5 comentarios
Hola,
Para ocultar el contenido de una etiqueta desde CSS y que este no ocupe espacio en la página la mejor opción es utilizar la propiedad CSS "display" con el valor "none".
Para restaurar su contenido basta con volverla a establecer a "block" o "inline" dependiendo del caso.
Ej:
#contenido0 {
display: none;
}
document.getElementById('contenido'+item).style.display='block';
Esto es la idea básica. Lo mejor para hacer estas cosas es utilizar javascript no intrusivo y diferentes clases CSS para los cambios de estado.
Aquí te dejo un enlace: http://www.onlinetools.org/articles/unobtrusivejavascript/
c881: Gracias O Doutor, ya me imaginaba yo que podía no ser la mejor forma :D Recordaba haber hecho esto con un timer para hacer aparecer la capa progresivamente (modificando el valor de height), por eso no busqué si existía un atributo más acorde con el problema.
Respecto al javascript no intrusivo y el uso de clases, estoy de acuerdo. En el caso en el que he usado este código se trata de una solución a medida, así que el uso de Javascript es requisito de la aplicación y punto ;)
Funciona en opera, safari y además navegador interno del navegador de rss atom newsreader.
Aprovecho para felicitarte por el artículo porque no sé si será la mejor forma de hacerlo, pero funciona y es tremendamente útil.
por bitebit, en 2005-07-07 16:13:37 ∞
Los comentarios están cerrados: los comentarios se cierran automáticamente una vez pasados 30 días. Si quieres comentar algo acerca de la anotación, puedes hacerlo por e-mail.
2020-02-15 20:39:01
2020-02-15 07:58:43
2019-10-27 09:38:45
por GVenom, en 2005-07-06 09:58:47 ∞