JMiur [E]

Me preguntaron por algún método sencillo para contraer y expandir elementos y lo primero que se me ocurrió fue algo similar a lo que utilizo habitualmente, un script muy simple que aprovecha la instrucción nextSibling.

El código a insertar en el encabezado del blog, por ejemplo, antes de la etiqueta </head> es el 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>
Para que funcione, utilizamos un enlace de cualquier tipo, puede ser un texto o una imagen:
<a onclick="return verocultar(this);"
href="javascript:void(0);">ENLACE</a><div style="display: none;">
....... el contenido a ocultar .......
</div>
donde lo único importante es que todas las instrucciones desde A hasta DIV, se escriban en una sola linea. Aquí hay dos ejemplos, uno utiliza un enlace de texto y el otro una imagen. En cualquier caso, el contenido puede ser cualquier cosa:

Ver/Ocultar [+/-]

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim.



Click para Ver/Ocultar

Fila 1 Columna 1Fila 1 Columna 2Fila 1 Columna 3
Fila 2 Columna 1Fila 2 Columna 2Fila 2 Columna 3
Fila 3 Columna 1Fila 3 Columna 2Fila 3 Columna 3



La segunda posibilidad, se me ocurrió viendo un truco en el Blog de Gem@ donde se mostraba un script para Desplegar y recoger (cualquier parte del blog).

Este truco, utiliza un criterio diferente, la idea es que a un elemento le adjudicamos una clase CSS, es decir, una serie de propiedades (color, fondo, tamaño, etc), una de ellas, la propiedad display con la que podemos controlar si está visible u oculto. Bien, el truco consiste en cambiar la clase CSS de ese elemento cuando hacemos click en algún lado.

En realidad hace lo mismo que la anterior pero, si cambiamos la clase podemos ampliar aún más las posibilidades y no sólo permutar entre visible y oculto. Demasiado hablar, aquí hay un ejemplo:


Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim.


Este es el script y las definiciones de estilo que agregamos antes de la etiqueta </head>:
<style type='text/css'>
.elementoVisible {display:block;}
.elementoOculto {display:none;}
.linkContraido {
cursor: pointer;
background: #color url(direccionURL_imagenContraido) no-repeat;
width: anchopx;
[propiedades de los textos]
}
.linkExpandido {
cursor: pointer;
background: #color url(direccionURL_imagenExpandido) no-repeat;
width: anchopx;
[propiedades de los textos]
}
</style>

<script type='text/JavaScript'>
function desplegarContraer(cual,desde) {
var elElemento=document.getElementById(cual);
if(elElemento.className == 'elementoVisible') {
elElemento.className = 'elementoOculto';
desde.className = 'linkContraido';
} else {
elElemento.className = 'elementoVisible';
desde.className = 'linkExpandido';
}
}
</script>
Ahora, podemos utilizar las clases CSS creadas dentro de cualquier etiqueta HTML. La sintaxis general es la siguiente:
<div onclick="desplegarContraer('nombreID',this);" class="linkContraido">TEXTO</div>
<UNAetiqueta id="nombreID" class='elementoOculto'>
....... el contenido .......
</UNAetiqueta>
donde nombreID debe ser un nombre único y UNAetiqueta es cualquier etiqueta válida.

Aquí hay algunos ejemplos:




Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.








Fila 1 Columna 1Fila 1 Columna 2Fila 1 Columna 3
Fila 2 Columna 1Fila 2 Columna 2Fila 2 Columna 3
Fila 3 Columna 1Fila 3 Columna 2Fila 3 Columna 3



El código fuente de los ejemplos utilizados:









139 comentarios:

Anónimo  

Saludos! Muy interesante y ùtil este post. Tan pronto tenga tiempo lo intentare.

Responder
Unknown  

Oye desde hace rato busca ésta manera... le había echado un ojo a los que habías puesto antes pero este es el correcto.
El comando o botón de ver/ocultar puede estar tras un mapa?

Responder
Anónimo  

Me ha gustado mucho el artículo es muy útil ya daré buena cuenta de el. Salud.

Responder
Anónimo  

Este truco me interesa!!!

Cuando tenga más tiempo -en setiembre- recuperaré esta entrada y la pondré en práctica!

Hace tiempo que quiero adjuntar partes de textos, pero me freno porque o ocupa mucho espacio o sólo sé facilitar un link...

Me quedo con esto.

:]

Responder
Gem@  

Cualquier método es bueno, yo lo aplico bastante para incluir códigos en las entradas aunque últimamente me inclimo más por el bloque de textarea.
Si tuviera que escoger una forma de expandir y recoger me quedo con aquella de bloques dinámicos (no recuerdo si le llamaste así)

Responder
Anónimo  

Hola,

Soy la que te preguntó eso, y te doy las gracias. Ademàs contestas realmente rapidamente. Eso da gusto encontrar gente como tu.

Muchisimas gracias,

Celine

Responder
JMiur  

El truco es interesante, no sólo por expandir y contraer un bloque (algo que se puede hacer de muchas formas), sino por las posibilidades que brinda cambiar toda la clase de un elemento mediante className ... lo siento, este comentario fue demasiado geek :)

s3b@sm@gr1:
aclárame eso del mapa porque no comprendo la idea.

Responder
Anónimo  

Muchas gracias!!
Federico

Responder
Anónimo  

Hola Jmiur! a sido este Script el ue he utilizado pero como te he comentado antes en principio no es compatible con el Explorer...

me podrias dar alguna solución?

Responder
JMiur  

Ahora voy a ver tu blog pero te anticipo que funciona en Firefox y también en Internet Explorer así que el problema debe ser otro.

Responder
Anónimo  

Gracias amigo!

No sé si será a causa de que aún tengo en la plantilla residuos de Scripts anteriores que aún no he eliminado...

Bueno, ya me dirás que es lo que está mal.

Responder
JMiur  

Sólo es un error de interpretación del código: fíjate ACÁ.

Responder
Luciano  

Hola Jmiur segui las instrucciones puse esto antes de /head tal cual

...function verocultar(cual) {
var c=cual.nextSibling;...etc

Creo una entrada de prueba copio lo mismo q pusite abajo todo junto en una linea..

....a onclick etc.. .......

pero no me funciona?

Me interesaba lo de Ver/Ocultar [+/-]

Gracias

Responder
JMiur  

Necesitaría verlo online y no lo veo en tu blog. Decima la dirección donde esté la prueba.

Responder
Luciano  

Gracias Jmiur al final por el momento lo descarte tal vez me incline por el seguir leyendo para no escribir en cada entrada el codigo . Tambien mejorar el diseño de los comentantarios .. si me permitis probare tu template adaptandolo a mi blog .
Saludos!

Responder
Anónimo  

Probe hacer un test con tu template pero me llevaria mucho tiempo modificarlo todo otra vez , al final voy aver si mejoro los comentarios ( ya que se ven muy juntos en mi template) nose como se podra mejorar seguire leyendo tu blog! a ver si encuentro algo.
saludos

Responder
JMiur  

Cualquier cosa, me mandas un mail y vemos los detalles :)

Responder
Luzbelito  

Probe y no me salio, pongo el codigo el codigo en el head despues pongo en la entrada el otro codigo y lo que quiero ocultar pero al momento de expadir no lo hace y no hace nada.
En que estoy fallando??

Responder
JMiur  

Por lo que veo en tu blog de pruebas, el script está bien pero no está correctamente implementado.

Has escrito esto:

<p>dddd <a href="javascript:void(0);"
onclick="return verocultar(this);">hd</a>
</p>

Cuando debería ser algo así:

lo visible <a href="javascript:void(0);"
onclick="return verocultar(this);">
ENLACE</a><div style="display: none;">
....... el contenido a ocultar .......
</div>

Es decir, el enlace (texto o imagen) debe ser inmediatamente seguido por un bloque oculto:

<a ....> ENLACE</a><div style="display: none;">

¿Se comprende?

Responder
Anónimo  

Hace tiempo que estaba intentando que me funcionara este truco.Busqué en varios blogs,pero nada.
Llegué a tu blog y el truco ha funcionado muy bien.

Gracias por ayudarnos y sigue adelante !!!

Responder
Raul  

gracias por el aporte, yo tengo algo muy sencillo y similar a tu ejemplo, sin embargo me funciona en firefox y no en iexplorer, no se porque. Te muestro el ejemplo a ver si tu lo ves:

Este es el script que tengo en el head,
function expandir(targetID) {
var target = document.getElementById(targetID);
if (target) { target.style.display = ""; }

}



function ocultar(targetID) {
var target = document.getElementById(targetID);
if (target) { target.style.display = "none"; }
}

-----------

luego uso este elemento select donde llamo a la funcion:

//quito los tags para poder postear y los sustituyo por ;
select name="busqueda2"

option; value="" onclick="ocultar('rango')" Estado ;option

;option value="sancionado" onClick="expandir('rango')" Sancionado
;option

; select
-----------


y dentro del mismo form donde esta el select, muestro un rango de fechas si la eleccion ha sido sancionado o sancionado total, sino no se muestra:
//se ha seleccionado el filtro de sancionados
//esto esta en un if y un else de php, pero aqui no puedo ponerlo como toca ;tr id="rango" style="display:none";

;tr id="rango" style="display:";
//segun el estado se muestra el de arriba o el de abajo

--------------

El caso esque me funciona a la perfeccion en firefox, pero en iexplorer no reacciona. ¿Alguna idea?

Responder
JMiur  

Se hace muy difícil entenderlo así, debería ver el código completo.

Responder
Raul  

¿a que direccion de correo te puedo enviar la pagina?

de todas formas el javascript es el que tiene el problema creo yo, porque si en firefox va y en explorer no, el codigo sera correcto, ¿ves algo raro en las funciones expandir y ocultar?

gracias de antemano

Responder
JMiur  

Si el tema es el script, es correcto y no tiene errores.

El problema me parece que es otro. Hasta donde yo sé, el objeto OPTIONS no tiene el evento onClick asociado. Fijate AQUÍ

Responder
Raul  

sin embargo el firefox lo reconoce. Aun asi, sino pongo el cambio en un onclick en option, ¿donde lo pongo? esque debe ser ahi porque si selecciono dos opciones(sancionado y sancionado total) en el select deben aparecer los dos campos de texto para el rango de fechas, si selecciona las otras dos opciones no deben mostrarse o deben ocultarse si ya estaban visibles.

Los controles estan en un elemento td de una tabla y lo que le paso es el id de ese td para cojer el elemento(getElementbyID).

Si fuera asp.net usaria el evento onChange pero en php no soy muy ducho.

Gracias por las respuestas

Responder
JMiur  

Si tu problema es IE, los únicos dos eventos que puedes detectar y que pueden o no servir son:

onreadystatechange y onselectstart

Estos, como muchos otros que tienen que ver con las selecciones, son tratados diferentes por los navegadores así que, generalmente, no queda otra alternativa que tener códigos diferenciados para cada uno.

Responder
Anónimo  

Hola Jmiur, (gracias por el correo,luego te respondo).
Lo que yo quiero aprender (lo estoy buscando por los archivos pero no lo encuentro);
es ese efecto deslizante que tenés en la página principal al desplegar los ejemplos de los widgets. Es mucho más suave la apertura. Lo tenés explicado en algún post?

Un beso

Responder
JMiur  

Mar, eso está explicado aquí:
Scriptaculous: El efecto Toggle

Es sencillo de hacer.

Responder
Anónimo  

Muchas gracias,Sr!
Hacia allí voy

-Aunque lo de "simple" sea muy relativo para mí! (y vos sufras)

:-)

Un beso

Responder
Raul  

No se si te acuerdas de mi, que hace unos dias te dej aqui plasmado un codigo javascript para expandir y contraer que no funcionaba. Pues igual que te lo plantee y me ayudaste, vengo aqui a agradecerte el tiempo que tomaste en responder y tambien a decir que ya vi lo que pasaba.
El select no esque no tenga el evento onclick en sus options, esque se me pasó ponerle a select la opcion
onChange = submit() para que refrescara cada vez que se cambiaba en el select. Ya decia yo que cuando he programado en asp.net, indicaba el change del select pero tambien el autopostback a true. El problema esque en php estoy empezando y no sabia como hacerle ese autopostback, :)

Responder
Desbrujulados  

Gracias JMiur: usé el primer método y todo salió bien. Si quiero ponerle una imagen como enlace en vez del texto ¿cómo hago?
Saludos (desde otro blog) marisol

Responder
Desbrujulados  

como verás aquí también puse el traductor que me enseñaste con el otro blog. Gracias. marisol

Responder
JMiur  

Muy bien, Marisol :)

¿Ves que en los ejemplos dice cosas como esta?

.......>Enlace 1</a>

Ahí en negrita está el texto. Simplemente cambias ese texto por una imagen:

<img src="laImagen" />

No sé si la explicación es clara.

Responder
j a v i e r . g m  

Hola, en mis blogs utilizo el último metodo que sale en este post, y hasta hoy no me había percatado que no funcionaba en IE. Obviamente yo soy usuario de Firefox, pero según google analytics, en uno de los blogs, el 50% de los visitantes utiliza IE. Me podrías decir que tengo que agregar y/o quitar para que funcione bien en ambos lados?

Saludos
Felicitaciones y agradecimientos por el trabajo de este blog.

Responder
JMiur  

Tendría que ver dónde lo usas. Los modelos del post funcionan tanto en Firefox como en Internet Explorer. Son muy simples y no tienen instrucciones diferenciadas.

Responder
j a v i e r . g m  

http://clockwork-tangerine.blogspot.com

Lo revisé en IE y aparece el texto completo.. y el "link" no cumple ninguna función.

Saludos

Responder
j a v i e r . g m  

Yo de nuevo..
Acá me pasa lo mismo.. y queda demasiado desordenado..
http://futbol-institutonacional.blogspot.com/2008/06/historial.html

Responder
JMiur  

Estás usando una etiqueta que llamas:

<text ............... >

¿qué etiqueta es esa? No es una etiqueta HTML válida. IE simplemente no la reconoce.

Responder
j a v i e r . g m  

Muchísimas gracias JMiur, ahora funciona perfectamente.
Como no funcionaba en Firefox, no pensé que era un formato no válido.

Saludos

Responder
JMiur  

Es que Firefox "adivina" las cosas que queremos hacer :D

Me alegro que se solucionara.

Responder
Desbrujulados  

JMiur: la explicación muy clara. Muchas gracias.
marisol

Responder
Incomprendido  

quisiera saber como puedes poner mas uno de estos en un post ya que cuando pongo 2 y kiero que me abran cosas diferente me aberen lo mismo
r: DelAlbo@hotmail.com

Responder
JMiur  

Lo que debes hacer es darles un ID diferente. El ID es un nombre único cualquiera.

Por ejemplo:

<div onclick="desplegarContraer('demo1',this);" class="linkContraido">CLICK</div>
<div id="demo1" class='elementoOculto'>
....... el contenido del primero .......
</div>

<div onclick="desplegarContraer('demo2',this);" class="linkContraido">CLICK</div>
<div id="demo2" class='elementoOculto'>
....... el contenido del segundo .......
</div>

Responder
Anónimo  

Hola que tal, tiene poco que encontre tu blog desde el de blogsmadeinspain.blogspot y pues veo que tienes varias cosas interesantes, pero bueno.

He estado buscando efectos y cosillas que agregarle a mi blog y me gusto muchisimo la manera como tienes en "desplegable" el archivo de tal manera que se puede mantener en jerarquia sin que ocupe tanto espacio.

me podrias ayudar con el codigo? la verdad empiezo a penas a entender el html y no me queda claro.


gracias y saludos


goremetaland@gmail.com

Responder
JMiur  

Gore:
Como es algo que me han pedido varias personas, la semana que viene publicaré la explicación lo más detallada posible.

Responder
Anónimo  

muchas gracias =)

Responder
Eulalia  

Gracias.
No supe encontrarlo.
Mañana, hoy es ya muy tarde, lo probaré.
Ya te contaré.
Por cierto ¿es compatible con el otro?
Un abrazo.

Responder
JMiur  

Si, es compatible, son cosas independientes.

Responder
Ramon Racat  

Hola JMuir, consigo contraer y expandir como una boa constrictor! me funciona de maravilla! es genial!
pero no consigo darle las mismas propiedades al titulo contraido como las que tengo para los titulos en el menu.
Los he copiado literalmente pero creo que al entenderlo como link no reconoce el padding 8x 8x o incluso la italic que le pongo... sabes a que es posible? Tengo arriba dos ejemplos funcionando en el blog de test (Quienes somos, Nuestras aventuras): http://provandopunto.blogspot.com
Te agradeceria que le echaras un vistazo! Muchas gracias!

Responder
JMiur  

Como no entiendo muy bien cuál es el resultado que quieres tener, sólo puedo dar alguna opinión general.

Si se trata de los títulos de los posts, hay dos definiciones en tu plantilla:
.post-title {.......}
.post-title a, .post-title a:visited, .post-title strong {.......}

La primera es el bloque H3 que lo contiene. En ese, puedes definir fondos y padding. La segunda sólo hace referencia al enlace, por ejemplo, con padding solo puedes moverlo horizontalmente pero no verticalmente porque no es un bloque.

Es posible también que ciertas propeidades no cambien porque son "heredadas" de otras definiciones; entonces, puede intentar forzarlo; por ejemplo:

font-size: 20px !important;

Responder
Ramon Racat  

el tema es que ni el titulo "Quienes somos" ni "Nuestras aventuras" mantiene la witdh que le pido en el CSS 320px... se corta al finalizar el texto...

Responder
Ramon Racat  

lo estoy consiguiendo usando el trick de insertar espaciados con &nbsp pero no me convence...

Responder
JMiur  

Quique:

Creo entender que lo que quieres es que se vea más o menos como esta CAPTURA. Si es así, lo que deberías hacer es que los enlaces sean bloques (por defecto no lo son). Eso, lo hace agregando la propiedad display:block;

.linkContraido {
.............
display:block;
}

Entonces, el enlace (que es el rectángulo azul) ocuparça todo el ancho disponible o si quieres, le das un ancho con width.

Responder
Ramon Racat  

eres un genio!! gracias! ya te debo un par de cenas para el dia que te pases por Barcelona! :)

Responder
JMiur  

Me alegro que se resolviera :D

Responder
Anónimo  

Hola, bigote. Espero que estés bien. Vengo usando sin problemas las instrucción nextSibling para expandir/contraer en los posts, y, si no entendí mal, el segundo script sirve para lo que preciso, pero no estoy segura de cómo. Sirve para desplegar/contraer elementos de la sidebar, como explicaste, pero no sé si sirve para desplegar/contraer parte de un elemento de la sidebar. Por ejemplo, tengo un texto (con enlaces) y es demasiado extenso; preciso que, como con Expandir/contraer, pueda verse parte de ese texto y luego el link para mostrar el resto. Miraba el ejemplo de un bloque div pero me colgué y tal vez no pueda hacerse. Si pudieras decirme si este script sirve para lo que preciso, te agradezco, y si podés ayudarme a que entienda por qué no entiendo cómo hacerlo, mucho más. Por tarada, pero eso ya lo sé y no logro arreglarlo.
Un abrazo y gracias por la atención.

Responder
JMiur  

Ambos scripts hacen lo mismo; la única diferencia es que en el segundo, no sólo permuta oculto/visible sino que también cambia el texto o la imagen que sirve de enlace.

Lo que querés hacer es lo mismo. en realidad, tenés un DIV (con parte de un texto) y adentro hay otro DIV (con el resto del texto) que es el que mostrás y ocultás.

Si no es importante el aspecto del enlace, es más sencillo el primer script que no requiere definiciones de CSS importantes.

Responder
Bonzu Pipinpadaloxicopolis III  

y los contenidos ocultos son detectados indistintamente por los buscadores??

Responder
JMiur  

Es una pregunta que no sabría contestarte porque hay opiniones en todos sentidos.

Google lo indexa igual ya que sólo lee los textos y usar CSS para no mostrar algo no significa que eso no esté allí; está igual, se carga igual. Para tener una idea de lo que leen los robots, imagina tu sitio sin ninguna propiedad CSS.

Algunos dice que lo que ocurre es que Google no le da la misma importancia que a lo visible pero, no estoy muy seguro que alguien entienda cómo funcionan los buscadores en realidad. Ni siquiera creo que Google lo entienda :D

Responder
Bonzu Pipinpadaloxicopolis III  

Muy cierto nadie entiende perfectamente el mecanismo de los buscadores, leí en algún sitio que Google te baja de puesto por contenidco oculto como en imágenes con la etiqueta alt, no creo que eso sea cierto pero quien sabe, a parte de que al buscar algo hoy es probable que de otro resultado mañana.

saludos

Responder
Anónimo  

Gracias. Ahora que estoy un poco menos dormida, entendí :$. La primera prueba no funcionó porque cuando había puesto la instrucción en el template, para ahorrar, puse function vo y, por supuesto, al colocar el script en el texto de la sidebar como lo tenía guardado en un txt (como lo escribiste vos), eh...
Gracias por la respuesta, bigote, y que estés muy bien.

Responder
Anónimo  

Hola JMiur.

Excelente, no se que pasa, ahora todos estos trucos que antes no podia realizar, ahora soy todo un experto, hehehe!.

Saludos...

Responder
JMiur  

No me extraña. Eso nos pasa a todos :D

Responder
│░ leinaD ░│  

JMiur quiero aplicar este script, pero hay la posibilidad de condicionar para poder visualizar el contenido oculto. Me explico, en mi blog quiero poner una respuesta a una pregunta planteada en una entrada pero que para poder verla deben dejar su respuesta que ellos piensen, y solo entonces poder ver la respuesta correcta, me explique bien? .... ojalá se pueda. Gracias

Responder
JMiur  

Es posible pero habría que crear un script específico para eso. Hay funciones en JavaScript como prompt que permiten algo de eso aunque claro, sería muy elemental ya que en el código fuente se vería la respuesta correcta :D

Responder
Admin  

A propósito del comentario 58 y 59, te cuento a ver que opinás, la vez pasada me manda un mail Carmen de UBH que me iban a dar de baja uno de los blogs porque no cumplía los requisitos de no se que, le contesté preguntandole de que me estaba hablando, y me dijo que no tenía el logo de UBH en el blog, como que no lo tengo?? Hace mil años que estoy en ese directorio, fue el primero al que me inscribí y se muy bien que tengo que tenerlo.
Y después me dí cuenta que lo tenía junto con todos los Directorios oculto como en este post, con una leyenda de Directorios click aquí.
Le digo a Carmen, y me dice, que los bots no lo detectaron, entonces pasó ella por el blog y como no lo vio a simple vista pensó que no lo tenía, pero me dijo, no estoy muy segura de si en serio o bromeando que los robots no saben hacer click.
Yo creo que aunque bromeara, y si realmente tiene bots, el sistema debió detectarlo o leerlo el logo no?
Mas con lo que dices en el coment 59.

Responder
Admin  

Otra vez se me cerró el navegador y la...p$%?¿!* me desloguea, se cierra por completo malditos bichos $&!?)&%(?!
Perdón por lo boca sucia :)

Responder
│░ leinaD ░│  

Otra vez yo JMiur podrías ayudarme para ese script del que te describía? ... lo he visto principalmente en foros, en los que para ver el link de descarga te pide que dejes un mensaje de gracias. Si tienes tiempo para este antojito me das un aviso. Gracias

Responder
JMiur  

k_nelita:
Es un tema sobre el que siempre me han quedado dudas. Sólo puedo darte la información que dispongo.

Google dice que los enlaces ocultos se utilizan para que sean rastreados por sus robots pero no los vean los usuarios. En ese sentido, distingue entre enlaces ocultos con fines engañosos y otros. En este último caso, sólo son ilegibles para los robots si son escritos usando JavaScript y no es el caso de solapas o bloques expandibles. Por lo tanto, en primera instancia, diría que esos enlaces son indexados; por lo menos, Google los indexa es decir, los ve.

DabertoMD:
Es un tema que me excede por completo ya que se trataría de hacer algo sólo con JavaScript que es el único lenguaje admitido en Blogger.

Responder
│░ leinaD ░│  

JMiur lástima que no puedas ayudarme en esta vez. Pero respecto a este post tengo 2 consultas:
-Cuando lo aplico, el título del encabezado que aparece en el menú del desplegable sale muy al margen izquierdo y se va al fondo del ícono del controlador del expandir y contraer... así que cómo hago para centrarlo o que aparezca seguido del ícono desplegable?
-Se pueden colocar los menúes desplegables uno al lado de otro, como formando una fila de estos menúes? es que cuando son muchos se ve poco estético uno debajo de otro.
Espero me comprendas la duda y me des una respuesta.
Gracias

Responder
JMiur  

Para que el texto n ose superponga con la imagen, hay que poner un padding (una separación). Por ejemplo, agrega esto en las definiciones:

.linkContraido {
...
padding-left:30px;
}

Ponerlos uno a lado del otro es posible. Lo más lógico para eso es utilizar una tabla.

Responder
│░ leinaD ░│  

JMiur otra vez con una consulta, disculpa por tanto trabajo si te causo. La idea es que quiero hacer una tabla en la que cada celda sea una lista de enlaces deplegable, entonces me puse a combinar los códigos que dejaste de ejemplos pero mi resultado fue la tabla con las celdas conteniendo la lista de enlaces pero sin el formato de desplegarse.... es posible lo que busco? :O solo me falta darle el estilo desplegable a cada celda.
Déme una mano en esto si fuese posible. Así aprendo algo más gracias a usted.

Responder
JMiur  

Debería ver el código o el ejemplo para saber de que se trata o donde está el error.

Responder
│░ leinaD ░│  

JMiur el ejemplo lo puse en un blog de prueba acá, dele una mirada y dígame que se puede hacer? Gracias

Responder
JMiur  

No veo que en el blog del ejemplo esté colocado el script, sólo la llamada en los enlaces. Falta colocar ese script.

Responder
│░ leinaD ░│  

Tenías razón JMiur no había puesto el script en esa plantilla :$ pero ahora el problema es que solo permite desplegar la primera celda, el efecto sobre las demás celdas desplega siempre la primera celda :S ésta es la prueba Que torpeza la anterior.

Responder
│░ leinaD ░│  

No sé por qué pero ahora ni la lista de enlaces funciona, ni en la prueba ni en el blog que uso y que antes desplegaba todas las listas, ahora todos los desplegables se aplican a la primera nada más, tanto en la lista de enlaces como en la tabla que contiene los desplegables :S no entiendo que pasó.

Responder
JMiur  

Cada elemento contraible debe ser único, es dcecir, debe tener un nombre único que es el que se meustra en el atributo ID y que debe ser el mismo del onclick.

En el ejemplo de tu blog, todos se llaman igual id="unaLista" y allí se produce el problema. Cada Lista debe tener un ID diferente; por ejemplo:

id="unaLista1"
id="unaLista2"
etc

Responder
│░ leinaD ░│  

:D otra vez! algo tan sencillo y me hace patalear, poco le agarro el hilo a esta gran madeja del HTML :) Gracias boss.
Ahora este pequeño detalle, porque siempre me aparece desplegado el primero? ... en tus ejemplos ninguno se desplegaba antes de acceder a ninguno, a mi me aparece la entrada con el primer vinculo desplegado :S

Responder
JMiur  

Dependerá del estado inicial que coloques en el elemento a expandir. Por ejemplo, si quieres que inicialemtne esté oculto:

<ul id="unaLista" class="elementoOculto">

y si quieres que esté visible:

<ul id="unaLista" class="elementoVisible">

Habiendo establecido esas clases CSS:

.elementoVisible {display:block;}
.elementoOculto {display:none;}

Responder
Deybi  

Hola JMIur.

Disculpa que ande molestando en esta entrada tan ajena. Necesito saber si existe una manera de poner emoticones en los comentarios. Sin tener el complemento del FireFox, sino directamente como veo en el escaparate y otros lugares?.

Saludines!.

Responder
JMiur  

Usando el script del post donde comentaste ayer. Usamos el mismo :D

Responder
Jaén  

Cómo podría hacerse para conseguir lo que han hecho en esta página.
Son dos cosas que no he podido lograr aún:
Que el texto expandido (o sea la entrada completa) se abra en la misma página, que no te redirija a otra página/ventana, y
Que, además del título, se pueda mostrar (en la parte contraida) un pequeño resumen de la entrada, Es que un título no es suficiente para interesar al lector, salvo que uno tuviera la virtud de concebir títulos geniales, certeros.

Responder
JMiur  

Ese tipo de truco está explciado en este post.

Responder
Usuario10  

Que tal JMiur, me podras orientar busque en tu blog como hacer el efecto de expander y contraer el archivo del blog o el de etiquetas, tal como tu lo tienes pero no pude dar con la entrada, me podras decir por donde puedo entrar?
Saludos Men ¡:D!

Responder
JMiur  

Esta es la entrada con el tipo de código que uso.

Responder
JorgeLanz 🐧✌️🇦🇷  

Ya probé de todo y tal vez por eso, me perdí y no encuentro el motivo por el cual no funciona.

Podrías fijarte en http://elojodelarazon.blogspot.com/2009/02/blogger-ver-u-ocultar-texto-o-imagenes.html qué es lo que hago mal ?

Gracias.

Responder
JMiur  

Porque para ese script, todo debe estar en la misma linea:

<a onclick="return verocultar(this);" href="javascript:void(0);">ENLACE</a><div style="display: none;">....................

Y en el ejemplo, está en líneas diferentes

Responder
JorgeLanz 🐧✌️🇦🇷  

Nuevamente por http://elojodelarazon.blogspot.com/2009/02/blogger-ver-u-ocultar-texto-o-imagenes.html.

El script de arriba está en líneas separadas como vos indicabas y el segundo script está toto en la misma línea como verás en mi blog.

No será que vos querés que los dos scripts, por separado, estén en una misma linea ?

Quiero decir, que el 1er script debe ir en la misma línea en el diseño del blog y el 2do script en el post que desee. Es así o me equivoco?

Parecerá una tontería para vos pero a mí me tiene a mal traer cuando no logro encontrar el porqué.

Gracias nuevamente.

Responder
JorgeLanz 🐧✌️🇦🇷  

Aclaro:

El 1er script lo puse igual que el tuyo de arriba de todo.

El 2do, es decir el que le sigue en este post, lo puse todo en la misma línea pero no funciona.

No será que debo ponerle un nombre a la función o algo así ?

Disculpas.

Responder
JorgeLanz 🐧✌️🇦🇷  

Edité tu código fuente y copié parte de la orden y funciona.

Ahora veré cómo debo ajustarla a lo que quiero.

De todas maneras indicame dónde está el error o qué hice mal o qué debo corregir.

Gracias.

Responder
JorgeLanz 🐧✌️🇦🇷  

Para que la imágen aparezca igual que la tuya, tuve que agregarla dentro de una tabla de una fila y dos columnas.

Ahora funciona bien !

:D

Responder
Jorge  

muy bueno!! gracias

Responder
skornz  

mmmm hola estuve intentando poner esto hace tiempo ya lo abia hecho en oro blog pero ahora he intentado y no se que sucede supongo es algun cambio de blogger cada vez que intento poner algun scripts que diga la palabra display= me cambia las comillas por "'"

mmm pense que podia ser algun codigo de mi plantilla pero creo un blog nuevo he intento y cada vez que pongo el codigo aqui mensionado lo publica y cambia als comillas bueno mas que nada era para comentar que esto no me funciona!!!

en fin saludos!!

Responder
JMiur  

No es cun cambio. Blogger es XML estricto por lo tanto , si se colocan comillas dobles, son cambaidas por simples y si son internas por &quot; Depende de dónde quiera ponerse un código, habrá que verificar que esté escrito correctamente.

No tiene importancia a menos que haya comillas externa e internas.

Responder
skornz  

grasias por responder ... :S la verdad no se que paso ahora ya no las cambia quiza fue algo temporal o que se yo bueno de todas formas muy agradesido ahora me esta funcionando!!

Responder
Truchinga?  

hola..

quiero saber si con el primer codigo se podria hacer para q en vez de q aparezca oculta aparezca abierto

se puede hacer?

Responder
JMiur  

Simplemente no coloques:
<div style="display: none;">

sólo coloca:
<div>

o bien:

<div style="display: block;">

Responder
Usuario10  

Hola JMiur,

La vez pasada me ayudaste para hacer un script que me escondiera todos los ID menos el ID del div que queria mostrar, este ID aparecia con scriptacolo dentro del script era asi "Effect.toggle('canal'+tv,'appear')" quisiera saber como pudiera utilizar el ID con la c.style.display='none' con la expansion sencilla.

Esto si recuerdas lo emplee para mostrar canales de TV en mi blog ahorita esto lo puedes ver funcionando aca http://www.hiperdescargas.org/2009/05/canales-de-tv-temporal.html, gracias JMiur como siempre te saludo con respeto amigo.

Responder
JMiur  

No recuerdo eso pero, en la funcion verocultar(cual), cual es el ID de algo. No sé exactamente de que se trata pero, podría ser algo como: verocultar('canal'+tv)

Responder
pruebas  

amigo he recorrido ya muuuchos blogs buscando novedades para la opcion de leer mas y el 99% me dice lo mismo con los mismos codigos, div class='post-body y que lo sustituya por otro pero en mi plantilla no aparece esto por ningun lado, que me aconsejas? es bien tedioso estos post tan largos y yo no veo forma de ponerle la opcion de leer mas porque no me aparece este codigo en mi plantilla. Me podrias ayudar? De veras te voy a estar bien agradecido. mi blog esta en construccion y este http://yurienaquino.blogspot.com/

Responder
JMiur  

En el caso de tu blog, en lugar de buscar <div class='post-body> busca esto:

<div class='post uncustomized-post-template'>

Es la misma parte.

Responder
Inmortal  

Aaaah esto me esta estresando estoy dandole y nada de nada! :( pero no me voy a rendir :D

Responder
Webs  

hombre eres el puto amo hace tiempo que busco algo asi y por fin consegui
un saludo

Responder
Isaias Arredondo  

Ah que caray! busco un truquillo y casi siempre termino aquí :P jeje oye, muy buenas las opciones, opte por la no 2 solo un detalle, cuando lo aplique el texto de enlace quedaba encimado con el botón por lo que tuve que entrar a tu código fuente para ver que me falto y me percate que con agregar:

padding: 0 30px;
width: 150px;

el problema se resolvía perfectamente, se que quizás suena lógico para alguien que sabe de CSS pero para quien no, puede ser un motivo para decir "no me sale" ;_; y que desista.

y por último, recomendaría que les des la opción de pegar la sintaxix:

<div onclick="desplegarContraer('nombreID',this);" class="linkContraido">TEXTO</div>

<UNAetiqueta id="nombreID" class='elementoOculto'>

....... el contenido .......

</UNAetiqueta>

en Configuración-Formato-Plantilla de entrada para que la tengan por default en cada entrada y solo la borren cuando no la usen.

Un saludo y una enorme felicitación por el extraordinario trabajo que haces :D

Responder
Varg  

buenisimo script, necesitaba algo asi. agradecido master....

Responder
Anónimo  

¿tienes idea de por qué me sale esa otra flecha a la izquierda que cuando la clicas te vas para arriba? debe de ser un fósil de todos los códigos que implementé, pero me gustaría poder sacarlo... en http://paraninosconcabeza.blogspot.com, en el footer. (Jmihur, eres todo un caballero, como en la "foto", me encanta).

Responder
JMiur  

Daría la impresión que arriba de los directorios que se expanden, hay un script. Estoy leyendo el código fuete así que trato de imaginar :)

Podría ser algo que mostrara posts aleatorios pero no funciona. Es ese script el que escribe el enlace. Puede ser que comience asi:

<script type="text/javascript">
//<![CDATA[
if(typeof(rnd) == 'undefined') var rnd = '';

Responder
Anónimo  

Hola

Excelente el tutorial. Estoy usando la primera opcion por simplicidad pero he notado que para expandir la primera vez el contenido, debo hacer 2 click en el enlace en vez de uno (como en los ejemplos de esta pagina). Probe en todos los navegadores y en todos pasa igual. Que podrá ser?

Responder
JMiur  

Tendría que ver el código que usas pero, asegurate que el DIV oculto tenga el parámetro style="display:none;" colocado en la etiqueta.

Responder
danielgLIS  

Oye hay alguna forma para que los elementos se demoren en publicar???

Responder
JMiur  

Usando algún script como este o este.

Responder
WIÑAYPAQ  

Hola, está raro en mi plantilla. Está al revés, aparece mostrando el contenido :S.

Responder
JMiur  

Deberías establecer el estado inicial del objeto como display:none para que aparezca oculto de entrada.

Responder
WIÑAYPAQ  

Si, lo copie tal y como lo muestras y nada.

Responder
JMiur  

Si no me dices donde está el ejemplo, no puedo contestarte.

Responder
WIÑAYPAQ  

Ya, aquí está http://www.prodwin.net/2010/01/directorio-de-salmistas.html funciona, pero aparece mostrando el contenido.

Responder
JMiur  

Pués yo los veo contraidos y al hacer click se expanden.

Responder
Unknown  

He vuelto a la carga Vargas! :P
Se me ha ocurrido -a Gem@ antes de los benditos cortes de luz-, el primer scrip para 'seguir leyendo'...ahora me pregunto, habría alguna manera de colocar con la librería Scriptaculus esa subidita?
Espero no complicarte sabes que no sé explicarme :S

Responder
JMiur  

Graciela:
No sé si es algo así l oque buscás pero, el efecto más simple para ocultar y contraer con Scriptaculus se llama Toggle. Fijate en esta entrada a ver si algo así sería útil.

Responder
Unknown  

Eso Jmiur! debo colocarlo dentro de un div?

Responder
JMiur  

Siempre hay dos partes, una es el enlace del Toggle, el que permuta algo de expandido a contraido y visceversa. Puede ser cualquier enlace.

La segunda parte es eso que se oculta y se muestra; puede ser un DIV o cualquier etiqueta que tenga un ID, un nombre único.

Responder
Unknown  

Parece que viene complicadísimo :O bien quedará como está con el scrip :P

Responder
JMiur  

Jajajajajajaaja. Pués sí, esa aprte no es tan sencilla de modificar. Cualquier cosa, me mandas un mail y lo vemos.

Responder
GoodOldLeon  

Jmiur... de casualidad este mismo código podría utilizarse para expandir y contraer gadgets de la sidebar???
actualmente estoy usando el efecto toggle de scriptaculous, pero me parece de gusto por solo un par de elementos. Preferiria algo mas sencillo, y liviano a la plantilla, como este.
Sería posible??

Un abrazo!

Responder
JMiur  

León:

No todos los métodos; el primero no pero el segundo si; de alguna manera es como hace el Toggle pero sin animaciones. Algo parecido se muestra en esta entrada que es el método que utilizo.

Si nisiquiera quieres cambair gráficamente las cosas, puede simplificarse aún más.

Responder
Nano Calvo  

Muy buenas,

estoy intentando aplicar este truco, sin éxito. Una vez insertado, al cliquear sobre ENLACE no se abre nada. Puedes ayudarme de alguna forma con esto?

Muchas gracias y un saludo

Responder
JMiur  

Nano: ¿Dónde tienes un ejemplo que pueda ver online?

Responder
Unknown  

hola ya tenia implementado este script pero ahora ya no me funciona como antes el texto se me sobrepone con la imagen alguna idea de cual pueda ser la causa de esta ?

Saludos Jmiur

mi blog es este xtorquemadax.com

Responder
JMiur  

Agrégale algún paddíng al texto para separarlo de la imagen. Algo así

.linkContraido {
.......
padding: 10px;
}

Responder
Anónimo  

horas y horas buscando un script que me pudiera funcionar en mi web de imagenes
y púes llegue aqui, y asunto solucionado
muchas gracias por esta entrada y por el tiempo que le decicas a ayudar a los demas
saludos

Responder
spider_pc  

Hola gracias por los datos procedí como indican en el Blog de Gem@ pero tengo un problema todo el texto que quiero que se desligue se junta. Como lo puedo solucionar? Acá el ejemplo: http://tequieroperosolocomoamiga.blogspot.com/2011/03/rocksaltaradio-2011-programas-de-la.html

Quisiera que las listas de contenidos sean desplegables, pero que queden de la forma que están. No que se junte todo como es el ultimo caso en el ejemplo del link que dejo.

Responder
JMiur  

Se juntan porque así es como están escritas; es un alrgo texto sin saltos de línea y todos los de arriba se ven diferentes porque se han escrito de forma diferente.

En ese último, incluso, estás usando la etiqueta UL que crea una lista pero las listas no se crean de modo automático, incluyen etiquetas LI para cada uno de los items:

<ul>
<li>Conduccion: Tomás García Senin de "Antes Que Nada" .... </li>
<li>otra cosa .....</li>
<li>otra cosa .....</li>
<li>otra cosa .....</li>
................
</ul>

Responder
Anónimo  

hola jmiur. yo lo que quiero en mi nuevo blog LaFacu©News es un sistema de expandir-recoger que se produzca con solo clicar en el título de la entrada, en el mismo texto, en cualquier elemento del post sin necesidad de poner signos ni textos tipo "leer más". El ejemplo lo puedes ver en este blog, a ver si se puede... http://www.kindsein.com/.
Gracias!!

Responder
JMiur  

Ese, es un tema de diselo general así que sólo puedo darte una orientación.

Primero, debes identificar el DIV que contiene las entradas y que por defecto dce::
<div class='post'>

Luego, debes condicionar las entradas, de tal forma que ese sistema, no funcione en las páginas individuales.

En ese DIV, hay que colcoar un evento onclick y, como en Blogger, escribirlo se hace complejo, mejor usar una función; algo así:


<div expr:onclick='&quot;abrirpost(\&quot;&quot; + data:post.url + &quot;\&quot;);&quot;'>

Por último la función en el head:

<script>
function abrirpost(url) { document.location.href=url; }
</script>

Imagino que se puede hacer de muchas otras formas.

Responder
Pacheta  

No sé por qué no me sale hacer esto...
http://estudioantropologia.blogspot.com/

En el menú inicio debería de aparecerme un elemento a mostrar u ocultar pero no me lo permite, no sé qué he podido hacer mal.

Toda ayuda es bien recibida, gracias.

Responder
JMiur  

Si se trata de los enlaces Bienvenidos, Participar e información general; funcionan perfectamente.

Responder
MAI  

Fijate hasta dónde he retrocedido para usar este código que aun antiguo por sencillo y bueno, dos veces bueno !!
Suelo usar otro perfil pero te dejo un abrazo lunar esperando que sepas de dónde te llega, que paso por aqui mil veces por puro gusto pero pocas te dejo las "gracias" y ya era hora :)

Responder
JMiur  

Gracias, MAI :D

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR