Expandir y contraer


Y hoy vamos a ver como crear el efecto de expandir y contraer, que nos permitirá ahorrar espacio en la sidebar de nuestro blog.

Para ello, hacemos lo siguiente:

♠ Ingresamos a Edición de HTML/ Expandir plantillas de artilugios y en la plantilla buscamos </head>
♠ Antes de </head> , pegamos lo siguiente:

<script type='text/JavaScript'>
function verocultar(cual) {
var c=cual.nextSibling;

if(c.style.display=='none') {
c.style.display='block';
} else {
c.style.display='none'; }
return false;
}
</script>


♠ Una vez pegado el código de arriba, damos click en Guardar plantilla
♠ Para que funcione el efecto de Expandir y contraer, entramos a Edición de HTML/ Elementos de la página/ Añadir un gadget y damos click en HTML/Javascript .
♠ Ahora, cada vez que querramos agregar algo que sea muy largo en la sidebar y deseemos ahorrar espacio, agregaremos lo siguiente:

<a onclick="return verocultar(this);"
href="javascript:void(0);">Ejemplo</a>
<div style="display: none;">......lo que se ocultará.........</div>

♠ Pueden ver algunos ejemplos en la sidebar de mi blog, donde dice: Sobre este blog / e-mail ó IMPORTANTE:licencia CC. En ambos casos verán que también se pueden incluir en el contenido oculto, imágenes.
♠ Finalmente, si desean que el lugar donde tienen que dar click para que se expanda el contenido sea una imagen y no letras,sustituyan donde dice EJEMPLO por <img src="url-de-la-imagen"/>

Consultas...Son todas bienvenidas.

17 opinaron:

Anónimo

Está muy bueno, gracias por el truco

Responder
Anónimo

Qué interesante,me ahorrará espacio

Responder
Anónimo

Muy bueno :)

Responder
Anónimo

Ya lo conocía; es muy útil

Responder
Josué

Interesante, funcional y comprensible, ya tenia un tiempito que queria hacer esto, sin embargo lo aplicare más adelante :D
cuando el blog este al tope :D
por el momento como puedo hacer un "expandir y contraer" las entradas de las etiquetas?

Así como tienes tu nube de etiquetas, que al hacer click en un temas, da resultados pero solo de titulos, cuando le das click en + - se expande el contenido?
disculpa las molestias, pero estos trucos estan muy buenos :)

Responder
Jéssica YK

» Anónimo: gracias por la vsita. La próxima vez trata de tener habilitado tu perfil o deja un enlace a tu blog.

» Gina: sí, tienes razón.

» Karla: gracias. La próxima vez trata de tener habilitado tu perfil o deja un enlace a tu blog.

» Juan Carlos: me alegra que te haya servido :)

» Josué: para lograr que se expanda la entrada al dar click en la etiqueta y que sólo se muestren los títulos, puedes ver esta entrada.

S@lu2

Responder
Josué

Muchas gracias Jéssica, lo veré.

Responder
Unknown

Ainss!! soy un poco burrito con esto hehe :S , no entendi com hacerlo y la verdad necesito comprimir mi widgeth del "Archivo" como el tuyo estaría interesado en tu ayuda. Muy buen Blog

Responder
Jéssica YK

» Josué: si tienes alguna duda, me avisas.

» Luis Jesus: en la presente entrada vimos como agregar el efecto expander y contraer con javascript; el que yo uso para expander y contraer los archivos es con las API de Google, que le da un efecto deslizante cuando se expande y contraen los archivos. Estoy preparando un post sobre el tema que saldrá dentro un día o dos :)

S@lu2

Responder
Unknown

Buenas, esta muy util todo lo que publicas y ya le di uso a muchas cosas, pero sinceramente no entiendo que es lo que va dentro de "Ejemplo". Quise aplicar este expandir/contraer para el blog roll, pero no he dado con la tecla. si puedes ayudarme te lo agradecería muchisimo!

saludos !
Atte: Frank!

Responder
Jéssica YK

» Frank:
El código de la presente entrada sirve para expandir y contraer el contenido de un gadget, digamos que quieres colocar una biografía sobre ti pero al ser muy largo, puedes poner un link de Leer más y al hacer click sobre éste se expandirá el resto de la biografía.

Otra cosa sería expandir todo el contenido del gadget, como puedes ver en mi blog donde dice Archivo [+/-] si das click se expande y con otro click se contrae.

Para ayudarte, explícame que deseas hacer: expandir una parte del contenido del gadget? ¿ o expandir y contraer todo el gadget? Porque para cada caso se aplican diferentes códigos.

Con tu respuesta podré ayudarte.

S@lu2

Responder
Unknown

Jéssica!
muchas gracias por responder tan rapido!!

Esactamente lo que me gustaría hacer en http://exordium.blogspot.com/ es poder contraer y expandir prácticamente todos los gadgets, como lo hice en http://eventosfreakout.blogspot.com/

Lo que hace que entienda menos aun que es lo que sucede con mi plantilla.

Pero lo que mas me complica es el blogroll, ya que el mío es gigantesco!!

Una vez más, muchas gracias !!

Responder
Jéssica YK

» Frank:
Ya veo, en tu blog http://eventosfreakout.blogspot.com/ se usó un efecto deslizante para expandir y contraer el gadget.
Para hacer lo mismo en tu otro blog, sigue los pasos de esta entrada.

S@lu2

Responder
Anónimo

No me funciona... no se por que, ni el de etiquetas, ni esto. por favor ayuda,

Responder
Unknown

Muchas gracias por la ayuda pero si de inicio quiero que todos mis bloques estén compactados como puedo hacerle, eh buscado en muchos lados y no encuentro una respuesta...

Responder
María

Muchas gracias por el tutorial. Ya lo tengo puesto en una plantilla de pruebas pero tengo una duda. Cuando se hace click sobre lo que se quiere desplegar, aparece el contenido oculto muy rápido, me gustaría que apareciese de forma suave, como un efecto toggle pero no sé exactamente, qué cambiar o añadir para hacerlo. Muchas gracias :)

Responder
rbn

Hola, quiero saber si sirve para ocultar un post entero, es decir largo, como para ahorrar espacio e ir añadiendo otros post debajo y asi susecivamente he probado otros codigos y no ne han funcionado, lo quiero utilizar en otras plataformas que no son Blogger, gracias.

Responder

Por favor, trata de tener habilitado tu perfil (has click en "Comenta con el antiguo editor" para iniciar sesión) o deja un enlace a tu blog escogiendo la opción "Nombre/URL", procura no dejar comentarios Anónimos.
Nota: Si es que se presenta algún problema con el formulario de comentarios, sólo has click en "Comenta con el antiguo editor"

Gracias por participar en el blog.

inicio