83

Expandir y contraer partes de un post con Scriptaculous

Expandir/contraer
Antes ya vimos como expandir y contraer cualquier gadget usando el efecto "slide" de Scriptaculous.

En esta ocasión vamos a ver como usar el mismo efecto para expandir y contraer partes de las entradas.


[1] El primer paso es incluir el código necesario para el uso de cualquier efecto con Scriptaculous (como ya vimos en la entrada sobre Scriptaculous, este código solo es necesario incluirlo una vez en la plantilla) así que, si ya lo tenemos incluido nos saltamos este paso.

Colocamos el código antes de </head>:

<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load("prototype","1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>

[2] Una vez hecho esto, ya podemos usar el efecto en cualquier entrada, para aplicarlo tenemos que añadir unas líneas de código en la parte de la entrada que vayamos a mantener oculta hasta que pinchemos sobre el texto que usemos como "enlace":

<a href='#' onclick='Effect.toggle("UNO","slide"); return false'>Texto enlace &#9660;</a><div id='UNO' style='display: none;'>

Aquí la parte oculta de la entrada

</div>


Notas:
Fijaros que en el código aparece dos veces la palabra "UNO", esa palabra es la id del <div> y tendrá que ser distinta cada vez que usemos el código para que el efecto funcione sin problemas.

Procuraremos incluir el código una vez editada la entrada desde la pestaña "Edición de HTML" del editor y publicar directamente desde ahí, sin volver a la pestaña "Redactar".


EJEMPLO (Texto enlace) ▼

Entradas Relacionadas:

83 comentarios:


Chaantii

Parece fácil, voy a intentarlo ;)

PD: Qué bueno lo de la mariposa xD

Chaantii

No me sale :S

Da igual, me quedo con mi boton input :D

Chaantii

:O Ya me sale! Habia hecho mal una cosa xD

Theemilio_crazy

Gracias Rosa... :D

jmaza37

Excelente rosa, ah y se ve mas gustoso de leer mi blog,,,gracias por todo

Nándor

MUCHAS GRACIAS por el consejo!!!

Jhony Page

Ola, gracias por el post

Pero tengo una pregunta, yo tengo una etiqueta con muchos post y cuando le dan click, se demora en cargar mucho, como hago para contraer todos haciendo solo un paso... o no se puede y tenga q poner ese codigo en cada uno de ellos?

Gracias de antemano

jmaza37

REGRESE!!!.. mi pagina tiene a diario muchos post, esta bueno este truco, pero lo malo es que hay que cambiar de codigo cada vez que publicamos un post, lo estoy usando hasta ahora, pero si repito el codigo en alguno de mis post, el efecto se descontrola, especialmente si uno utiliza las etiquetas...ojala se pudiera quitar eso del codigo, este truco seria perfecto sin el codigo...gracias Rosa

kikop

Ohhh mira Rosa lo que encontre por la Net, me gusta mucho como han puesto la fecha, estoy buscando una solucion para poder incorporarlo a blogger :) . Esto ya es un desafío no parare de buscarle la forma hasta dar con ella, porque la quiero en mi Blog. Saludos!

Jorge Ángel Aussel

Rosa, a ver si un día nos enseñas a expandir los títulos en los post de las etiquetas con Scriptaculous como lo tenés en tu blog. Me encanta ese efecto.

Por otra parte lo implementé, pero no consigo alinear el título con el [+/-]

Rosa

@Chaantii ¡Biennn!

@Theemilio_crazy ¡A ti! :D

@Nándor Gracias a ti por darlas ;)

Rosa

Jhony Page Si entendí bien es algo como esto lo que buscas:
http://elescaparatederosa.blogspot.com/2007/04/ttulos-expandibles-en-los-post-de-las.html

Rosa

jmaza37 Lo siento, pero así ha de ser, el script necesita conocer la id del elemento para aplicar el efecto en el elemento concreto...

Rosa

kikop No hace falta buscar demasiado, ni irse a blogs de otras lenguas :D

http://vagabundia.blogspot.com/2009/07/rotar-transformar-jugar-con-css.html

La Dueña

Gracias Rosa!!! me resulto muy fácil y me salio de primera! Cosa rara en mí :)

Besos!!! :D

Rosa

Jorge Ángel Puedes verlo aquí:
http://elescaparatederosa.blogspot.com/2009/04/efecto-deslizante-slide-para-entradas.html

Jorge Ángel Aussel

Allá voy... vamos a ver si lo logro. Estoy escribiendote muy seguido y haciendo muchas consultas porque no paro de editar mi plantilla para inaugurar el nuevo blog... Gracias por toda la ayuda brindada.

kikop

@Rosa :) encuentras todo siempre, muchas gracias ^-^, gracias a ti me ahorrare mucho tiempo. Ahora voy a probar que tal me va. Saludos!!!

Bonzu Pipinpadaloxicopolis III

Hola Rosa

Quisiera usar otro efecto aparte del slide pero no recuerdo los otros.

¿Sabes? Celebro el mes de blogger con nueva plantilla, ¿sabes de alguien que quiera celebrar igual? ¿Tu?

Jimmy

gracias gracias! este efecto es genial :D

Rosa

Bonzu Visita a Oloblogger y seguro se te "refresca" la memoria :D
http://oloblogger.blogspot.com/2008/05/desplegar-partes-del-blog.html

¡Me ha encantado el diseño de la Blogger-plantilla! y te confieso que hace tiempo diseñé yo una parecida con intención de usarla en el Escaparate, pero no llegó a convencerme...
No creo que me anime a celebrar así...pero le daré publi a tu plantilla porque se lo merece :D

Bonzu Pipinpadaloxicopolis III

Gracias Rosa, siempre ayudando a todos :-) de hecho es un idea que tenía desde hace ya tiempo así que aproveché mis vacaciones XD

a y ya vi el resto de los efectos, gracias.

Inmortal

Graciaaass!!! :D justo lo que necesitoo muchisimas gracias!!

Damned

Mmmm, problemas... Cuando clico en el texto de enlace no se expande el texto oculto, sino que sube al principio del blog :S
¿Qué puede ser? Tengo los códigos bien... Creo :-|

Chaantii

A mi al principio me pasaba igual que a Damned, pero era porque no había cambiado la palabra "UNO" (hay dos y yo solo cambié uno)

Jose M

Hola Rosa a mí el efecto me parece muy chulo pero da problemas. Si quieres volver a editar la entrada tienes que pegar otra vez el código y si la entrada es demasiado larga tienes que subir para cerrar (mucha labor), estaría bien poder cerrar al final de la entrada. Yo aún seguiré con el leer más que me parece mucho más funcional. Gracias y un saludo bella.

Vku

Hola rosa hace tiempo que no ando por acá y siempre con cosas muy buenas, te comento que yo lo he utilizado y queda muy bien.
Para no confundirme lo que pongo en el id es el nombre del titulo donde lo utilizo y le puse dentro del div repetido el código con el mismo id abajo del todo pero con la palabra cerrar así se puede cerrar desde el final de lo abierto
queda así

Rosa

Damned Lee el comentario de Chaantii que está después que el tuyo, ese debe ser tu mismo error, creo.

¡Gracias Chaantii! :D

Rosa

Jose M No es un efecto cómodo como para sutituir al "leer más", es simplemente un efecto para ocultar algún dato determinado...

Tomàs Mallafré

Blogger Tomàs Mallafré dijo...

Perfecto, y siguiendo el consejo de Vku todavía mejor.
Ya sería demasiado que alguien explicara cómo hacer lo mismo pero con efecto fade.

¡Gracias!

Rosa

Tomàs Mallafré Quizás Vku sepa como hacerlo, ve a su blog y pregúntale a el...

Damned

Gracias Chaantii, pero no era eso... Tengo el código dos veces en la entrada, en la primera lo dejé con "UNO" y en la segunda puse "DOS"... Y no iba...
Pero a ver si lo he entendido bien, hay que cambiar el UNO las dos veces que aparece en el código, ¿no?
Gracias de nuevo.

Chaantii

Tienes que poner la misma ID en los dos. Ejemplo: Si en el primero pones "UNO", en el segundo tienes que poner también "UNO". Y si en el primero pones "DOS" en el segundo también pones "DOS".

¿Entiendes? ;)

Rosa

Damned Para entendernos... creo que quieres decir que lo usas dos veces, es decir, ocultas dos partes distintas de la entrada...
Si es así, tendrías que poner en una la id dos veces tal como ves en la entrada, por ejemplo UNO y en el otro dos veces DOS por ejemplo, escrito de igual forma, si el UNO está en mayúsculas el otro UNO ha de ser idéntico y procura no tocar nada más (no borrar ninguna comilla por ejemplo...)

Aliento

http://alientoparatualma.blogspot.com/

Hola, ese es mi blog, la pregunta es,..bueno, antes de la pregunta, gracias y felicidades por la ayuda q das, tengo poco visitandote y me ha servido bastante,...ahora si la pregunta, use el scriptaculous y creo q me quedo bien, la cuestion es q solo se ve bien en opera,...al verlo en ff, no, no se q error cometi o como puede solucionarlo,...o de plano quitarlo y quedarme solo con el "leer mas"

de antemano, te agradesco la ayuda

Rosa

Aliento Este efecto es para cosas determinadas en entradas puntuales, no es una buena idea usarlo en lugar del "leer más"...

Ascesino96

hola rosa, tengo problema con esta entrada y creo que ya se el problema, pero para asegurarme, lo e usado en un texto de 850 renglones aproximadamente, funciona en textos muy largos??

Rosa

Ascesino96 No veo porque no habría de funcionar,si el código está bien aplicado, claro.

Ascesino96

no, ahora si funciona, lo que pasa es que al ser muy grande el texto que yo tenia, el efecto andaba muy mal, y parecia como si expandiera asi de una y no con el efecto, mira, lo puedes ver funcionando en mi blog en esta entrada
Me quedo muy buena!!!

Ascesino96

hablando de sriptaculous, hay alguna forma de usar sricptaculous y jquery a la vez??

Rosa

Ascesino96 Hay un sistema si, pero en Blogger no funciona con todos los efectos.

Damned

Hola de nuevo... Perdón por la tardanza en contestar a vuestros consejos, no he podido atender el ausnto :$
Acabo de hacer una prueba: en una entrada nueva he introducido el código sin nada más, procurando no comerme ninguna comilla o algo por el estilo ;) Resultado: el mismo problema que antes, cuando hago clic en el enlace de la parte oculta me sube al principio del blog.
Voy a investigar en más sitios a ver si el código varía o algo... Me gusta este efecto, me encantaría poder arreglar mi contratiempo :D
Gracias por las molestias y saludos!! :P

Rosa

Damned No creo que encuentres ninguna variación en otro sitio...
Si quieres,envíame por mail el código de la entrada donde tratas de colocarlo...Copia TODA la entrada desde la pestaña Edición HTML del editor de entrdradas.

Un Perro

No lo puedo creer, rápido, fácil y funcional en un "plis plas" hoy es un buen día para editar el blog parece :D
Un beso grande Rosa :D

El que sabe, sabe, y el que no ... debe pasar por el Escaparate

rugbyactualidad

a mi me funciona excelente , me costo un poco entander eso de los nombres de las entrada pero cuando comprendi que cada entrada tiene su propoio nombre(nombre= numero) me empezode ser a gran utilidad para disniuir el tamaño de mi blog

Saludos desde chile

rugbyactualidad

a se me olvidaba, gracias rosa

HECTOR

Rosa, excusame que te moleste, pero aprendiz tiene que preguntar mucho, jjajaja
la pregunta no viene con este tema pero tengo un blog ALGO MAS y la plantilla que uso tiene un colo azul aqua en donde esta el autor y la fecha y quisiera cambiarlas por otro color que haga mas visible las letras, en que parte esta ese color ?
Excusame la pregunta, quizas algo tonta pero como te dije estoy dando pinitos

Muchas Gracias

Rosa

HECTOR Así es, para saber hay que preguntar ;)

Localiza este código en tu plantilla:
.postmeta {
background:#5eb7c3;
padding:3px;
color:#fff;
}
Y en background cambias el código por el del color que vayas a poner ahí.

Daniel S.S.

Me salio perfecto el truco, pero ahora no me aparece la parte de seguidores del foro... tendrá algo que ver???

Rosa

Daniel Quizá si... a Seguidores le afectan muchas cosas, yo lo retiré por el mismo problema...

cargohe

muy bueno gracias. ;)

Ascesino96

Hay alguna forma de utilizar esto en un gadget, no en el titulo, osea, dentro del gadget escribir un texto y además usar el truco.

Rosa

Ascesino96 Así es... ¿porque no lo has probado ya en lugar de preguntar tanto y así lo sabes?

Jugada Preparada

Rosa, sabes si en vez del texto se puede usar una imagen?

Rosa

Jugada Preparada Supongo que si... en lugar del texto coloca la llamada a la imagen:
<img src="url de imagen"/>

WRChampion

Perfecto!! Muxas gracias, ahora mi blog ha kedado de lujo ;) www.virocu.blogspot.com

De aqui y de allá

Hola, Rosa. Acabo de iniciar mi blog y como quiero poner algo de código de programación he agregado la opción de contraer y expandir que comentas en el post. Como agradecimiento me gustaría hacer referencia a tu página. Lo he echo simplemente con tu nombre y el link, aunque no sé si hay formas mas vistosas de hacerlo. Como por lo que veo tienes bastante práctica en blogs, si sabes alguna y quieres comentarmela, mi blog es alvaromatabuena.blogspot.com

Rosa

De aqui y de allá Así está bien :D Gracias!!! y ni siquiera era necesario... pero te agradezco;)

●๋•╣ҜΞҜΘ╠●๋•

Hola Rosa, no me sale cuando le doy al enlace me lleva arriva de la página :(

Rosa

●๋•╣ҜΞҜΘ╠●๋• Revisa los comentarios anteriores.

●๋•╣ҜΞҜΘ╠●๋•

¿Por qué me dices eso? ya los revisé e hice paso a paso lo que pones en el post y por alguna razón no me sale, pero da igual no te molestes en contestarme estarás muy atareada bye

Rosa

●๋•╣ҜΞҜΘ╠●๋• Pues te lo digo sencillamente porque en comentarios anteriores han resuelto tu mismo problema.
Bye.

Fran Cruz

Hola rosa, gracias de antemano por el código y una consulta, ¿Se podría utilizar este efecto con una imagen en lugar de texto? Gracias y Feliz año¡

Rosa

Fran Cruz Claro, es igual con texto que con imagen, con las dos opciones funcionará.

Yhonny G España

Hola,lo que estaba buscando, muchas gracias.

Hay posibilidad de ocultarle la flechita hacia abajo a el texto de enlace y que quede simplemente el algo como : Sigue leyendo » ?.

Saludos y Feliz año nuevo. :)

Rosa

Yhonny G España Sustituye esta parte por "Leer más" o el texto que quieras:

Texto enlace ▼

Bilosony2™

Se podria hacer esto con las entradas????Como??

Desde Ya gracias!!!

Rosa

Bilosony2™ ¿Has leído la entrada? :o de eso se trata precisamente...

Bilosony2™

jeje disculpa la pregunta fue boba jeje:p lo que quise decir es si se puede contraer y expandir un post entero. De manera que no se vean enteros los post sino un pequeña parte desde la pagina de inicio??:o Algo simililar a los post en forma de sumarios..:D

Rosa

Bilosony2™ Ah claro... ahora entendí...te faltó decir con las entradas "completas", aunque la verdad que ahora que lo se, debería haberlo pensado :S

Mira en estas entradas (esto es solo para mostrar los títulos de entradas tal como están las mías en las páginas de etiquetas):

http://elescaparatederosa.blogspot.com/2008/10/entradas-expandibles-en-la-pgina.html

http://elescaparatederosa.blogspot.com/2009/04/efecto-deslizante-slide-para-entradas.html

Para mostrar además del título, un resumen de la entrada lo mejor es usar la función del nuevo editor de Blogger:
http://elescaparatederosa.blogspot.com/2009/11/como-usar-correctamente-el-leer-mas.html

Bilosony2™

Gracias:D

los hijos de la nada

muy bueno , pero tengo que poner de nuevo el mismo codigo en edicion html y en que parte

Rosa

los hijos de la nada El de Scriptaculous, el que va colocado antes de </head> no se repite, es el otro el que has de volver a colocar donde vayas a mostrar de nuevo el efecto, cambiando su id claro... pero todo esto es lo mismo que explico en la entrada :o

LCDO. MIGUEL RODRIGUEZ

MUYYYY BUENNNNNNOOO, SOY NUEVOOO Y ESTOY PONIENDO LOS POST Y NO HABIA DADO CON ALGO PAR AOCULTARLA GRACIS, PERO AUN ME FALTA LO DEL PDF O COMO PODRIA PONER UN ARTICULO EN WORD.....

Rosa

LCDO. MIGUEL RODRIGUEZ Blogger no admite el alojamiento de archivos así que tendrías que usar algo así:

http://nadabueno.com/documento-archivo-pdf-blogger-scribd.html

Manolo

Hola Rosa,
estoy intentando usareste efecto en una web normal (no en blogger) y no me funciona.
Después de muchas pruebas he acabado haciendo una versión mínima, sólo con este efecto, y ni por esas.

Por más que lo reviso no veo el error ¿Podrías echarle un vistazo?

http://sabermas.aergenium.es/sabermas3.html

Manolo

Se me olvidaba: Muchas gracias! ;)

Felipe

<Gracias>

Excelente Rosita

Muchas gracias por tus explicaciones y tu excelente contenido.

No lo había empleado antes pero a raíz de una sección que deseo crear en mi blog, este truco llega como anillo al dedo. :)

Felices Pascuas! ;)

</Gracias> :D

Rosa

Felipe Muy original tu <gracias> </gracias>... ¡Me ha encantado!! ... por supuesto que me lo copio :D ;)

Hyugasosby

:o Gracias Rosa, la verdad apenas desde ayer he estado revisado un tu Blog y me ha ¡Encantado!, todo lo que pones me ha servido muchisisismo y este post genial al igual que los otros :D

:D Con la gran ayuda que das podre hacer mi blog mucho mas lindo x3. Saludos desde Mexico :D

_CarlitoX_

Hola rosa como estas, espero que bien =)... verás, podrías ayudarme con este script, en mi blog no funciona bien y solo me sirve en opera, del resto nada de nada... Ya he probado varias cosas incluso deshabilitar jquery y otros script pero nada... podrías darme una mano en esta? gracias

Rosa

_CarlitoX_ No puedo decirte más que lo que dice la entrada... ya ves que en el ejemplo de la misma funciona en Firefox, IE...

_CarlitoX_

No ps rosa disculpame esta :$.... Estaba cargando mal el script, tenia una versión loca (1.2.3.4), nunca me fije en ese pequeño detallito... gracias de todos modos... ERES LO MAXIMO!!! ;)

Publicar un comentario en la entrada

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.

:) :(( :( :P :D :$ ;) :I :X :O |O :S