English Português

A veces queremos que cierto contenido tenga la opción de ocultar y de volver a mostrar, como puede ser el caso de los comentarios, mediante Javascript y un “DIV” te mostraremos como hacerlo.

Primero haremos uso de una función, para esto tienes que definirla entre las etiquetas <head></head> o hacer el llamado a la función externa en un archivo .js. La función es la siguiente:


<script>

function muestra_oculta(id){
if (document.getElementById){ //se obtiene el id
var el = document.getElementById(id); //se define la variable "el" igual a nuestro div
el.style.display = (el.style.display == 'none') ? 'block' : 'none'; //damos un atributo display:none que oculta el div
}
}
window.onload = function(){/*hace que se cargue la función lo que predetermina que div estará oculto hasta llamar a la función nuevamente*/
muestra_oculta('contenido_a_mostrar');/* "contenido_a_mostrar" es el nombre de la etiqueta DIV que deseamos mostrar */
}
</script>

Como se indica en el código, la instrucción “window.onload” predetermina un estado oculto de DIV, esto es, que estará oculto hasta que se llame de nuevo a la función “muestra_oculta”. Si quieres que se muestre el DIV de forma predeterminada solo elimina esa instrucción.

La forma de usarla es simplemente, se hace un llamado a la función mediante un link:


<a style='cursor: pointer;' onclick="muestra_oculta('contenido_a_mostrar')">Mostrar / Ocultar</a>

Esto mostrará/ocultará todo lo que estre entre las etiquetas <div id=”contenido_a_mostrar”></div>.

Te mostramos el ejemplo completo:


<html>
<head>

<title>Muestra oculta</title>

<script language="JavaScript">

function muestra_oculta(id){
if (document.getElementById){ //se obtiene el id
var el = document.getElementById(id); //se define la variable "el" igual a nuestro div
el.style.display = (el.style.display == 'none') ? 'block' : 'none'; //damos un atributo display:none que oculta el div
}
}
window.onload = function(){/*hace que se cargue la función lo que predetermina que div estará oculto hasta llamar a la función nuevamente*/
muestra_oculta('contenido_a_mostrar');/* "contenido_a_mostrar" es el nombre que le dimos al DIV */
}
</script>
</head>

<body>

<!--Al hace llamado a la función solo tienes que idicar el nombre del DIV entre parentesis -->
<p><a style='cursor: pointer;' onclick="muestra_oculta('contenido_a_mostrar')" title="">Mostrar / Ocultar</a></p>

<div id="contenido_a_mostrar">
<p>Este contenido tiene que mostrarse con el link</p>
</div>

</body>
</html>

Descarga la función y el ejemplo

Escrito por Francisco Oliveros

Soy un gran aficionado del diseño y de todo lo que el código puede comunicar. Ingeniero mecánico por profesión, pero dedicado al desarrollo web a tiempo completo.

Blog / Twitter

Comentarios

  1. Iván / Hace 8 años /

    Hola.
    He implementado esta función a mi blog y me he encontrado con un problema. No puedo añadirlo en más de una entrada ya que el div afecta a todas por igual y solo una se oculta. O se muestran todas. ¿Habría alguna manera de aplicar la etiqueta a más de un post seguido?
    Muchas gracias.
    Un saludo!

    Responder a Iván →
  2. Francisco / Hace 8 años /

    Hola Ivan!

    Si es posible, pero creo que te servirian más algunos scripts ya adaptados a blogger como este:

    http://blogyweb.blogspot.com/2007/05/artculos-expandibles-dentro-de-las.html

    y los de “leer más” que puedes encontrar en gemablog.

    Un saludo!

    Responder a Francisco →
  3. Serenity / Hace 7 años /

    Hola!
    Queria saber si existe la posibilidad de ocultar algun contenido de una entrada y que se active unicamente cuando uno publica un comentario. Saludos y gracias!

    Responder a Serenity →

Responder

¡Gracias por dejar tu opinión! Por favor procura que tus comentarios estén dentro tema, que no sean promocionales (spam), ilegales u ofensivos, de otro modo, serán borrados. Todos los enlaces serán moderados y la URL indicada NO será enlazada.

Blog and Web es un blog de Blógstica. Hospedado desde 2008 en Liquid Web.

Términos de uso - Política de privacidad