JMiur [E]

Animated JavaScript Accordion es un script desarrollado por leigeber y es, probablemente, uno de los métodos más livianos y flexibles que existen para generar acordeones, es decir secciones que podemos expandir y colapasar con algún tipo de animación.

Sólo tiene 25 líneas de código y además, no requiere de ningún tipo de libreria auxiliar por lo que puede usarse en cualquier sitio web sin restricciones.

A decir verdad, es un proyecto "viejo" que ya tiene una nueva versión, bastante liviana pero más sofisticada, sin embargo, me sigue pareciendo que el original, sigue siendo el más útil, salvo casos muy especiales.

Para usarlo, debemos agregar el script en la plantilla y eso, lo hacemos directamente; copiando y pegando el código antes de </head>:


<script type='text/javascript'>
//<![CDATA[
var accordion=function(){
var tm=sp=10;
function slider(n){this.nm=n; this.arr=[]}
slider.prototype.init=function(t,c,k){
var a,h,s,l,i; a=document.getElementById(t); this.sl=k?k:'';
h=a.getElementsByTagName('dt'); s=a.getElementsByTagName('dd'); this.l=h.length;
for(i=0;i<this.l;i++){var d=h[i]; this.arr[i]=d; d.onclick=new Function(this.nm+'.pro(this)'); if(c==i){d.className=this.sl}}
l=s.length;
for(i=0;i<l;i++){var d=s[i]; d.mh=d.offsetHeight; if(c!=i){d.style.height=0; d.style.display='none'}}
}
slider.prototype.pro=function(d){
for(var i=0;i<this.l;i++){
var h=this.arr[i], s=h.nextSibling; s=s.nodeType!=1?s.nextSibling:s; clearInterval(s.tm);
if(h==d&&s.style.display=='none'){s.style.display=''; su(s,1); h.className=this.sl}
else if(s.style.display==''){su(s,-1); h.className=''}
}
}
function su(c,f){c.tm=setInterval(function(){sl(c,f)},tm)}
function sl(c,f){
var h=c.offsetHeight, m=c.mh, d=f==1?m-h:h; c.style.height=h+(Math.ceil(d/sp)*f)+'px';
c.style.opacity=h/m; c.style.filter='alpha(opacity='+h*100/m+')';
if(f==1&&h>=m){clearInterval(c.tm)}else if(f!=1&&h==1){c.style.display='none'; clearInterval(c.tm)}
}
return{slider:slider}
}();
//]]>
</script>
Luego, el CSS que es totalmente configurable y que definimos para cada uno de los acordeones a usar ya que pueden agregarse un número indetermiando de ellos. Para este ejemplo, seria algo así:
<style type='text/css'>
#nombreExclusivo { /* es el DIV contenedor */
margin: 0 auto
width: 450px;
}
.accordion { /* propiedades generales de la lista */
color: #9AB;
font-family: Arial;
font-size: 14px;
margin: 0;
padding: 0;
width: 450px;
}
.accordion dt { /* es enlace/título que expande y contrae */
background-color: #456;
color: #DEF;
cursor: pointer;
font-size: 22px;
padding: 5px;
text-align: center;
width: 440px;
}
.accordion dt:hover { /* efecto hover sobre ese enlace */
background-color: #345;
}
.accordion dd { /* cada elemento oculto */
margin: 0;
overflow: hidden;
}
.accordion span {  /* el contenido  */
display: block;
margin: 0;
padding: 10px;
width: 430px;
}
</style>
Ahora, debemos crear los acordeones y eso lo hacemos con una lista especial, usando las etiquetas DL DT y DD:
<div id="nombreExclusivo">
<dl class="accordion" id="nombreInstancia">
<dt>titulo/enlace ejemplo 1</dt>
<dd> <span> ... el contendio del ejemplo 1 ... </span> </dd>
<dt>titulo/enlace ejemplo 2</dt>
<dd> <span> ... el contendio del ejemplo 1 ... </span> </dd>
<dt>titulo/enlace ejemplo 3</dt>
<dd> <span> ... el contendio del ejemplo 1 ... </span> </dd>
</dl>
</div>
Hay dos IDs que son importantes:

nombreExclusivo es el del DIV contenedor; si tenemos varios de estos acordeones, cada uno debe tener un nombre diferente
nombreInstancia es el de la etiqueta DL y será el que usemos para inicializar las funciones del script

Esto último, lo agregamos al final; por ejemplo, antes de </body>; en general, la sintaxis mínima es esta:
var miSlider=new accordion.slider('miSlider');
miSlider.init('miID');
Y podemos agregar dos parámetros adicionales:
var otroSlider=new accordion.slider('otroSlider');
otroSlider.init('otroID',0,'nombreClase');
El valor 0, en este caso, indica el panel que queremos que se muestre abierto por defecto y es el número de orden (comenzando con 0); si no ponemos nada, todos se ven cerrados; el segundo parametro opcional es el nombre de una clase que establecerá als propiedades del título/enlace de ese panel abierto.

73 comentarios:

Lagarto  

:) orale esta muy bueno, lastima que ya uso scriptaculos, oye por cierto que oytras buenas liberrias hay, por que he visto mas efectos pero con scriptaculos parece que no hacen nada.

Responder
Don Choky  

Me gusto este script. Estoy cambiando mi plantilla y talvez me sirva.

Hace rato se me ocurrio algo y no se si es posible:

¿Se puede mover de lugar el formulario de comentarios incrustado?

Es que a veces una entrada tiene muchos comentarios y el formulario se queda hasta abajo.

Me gustaria que el formulario apareciera entre el post y los comentarios ¿Se puede hacer eso?

Responder
Garabato  

memuero!!!!estaentradanolahabíavistodiosssssssssss!!!!necesitodormirrrrrrrrrr

Responder
JMiur  

Lagarto:
Este script no requiere librerías así que puede usarse con cualquiera que esté instalada.

Don Choky:
Si, eso es posible, debes buscar la parte que lo carga y que varia con las plantillas, generalmente, está en algo llamado comment-footer y es lago pero puedes buscar esto para darte una idea:
<b:include data='post' name='comment-form'/>
Toda esa parte del código, puede quitarse de ahí y ponerla más arriba dentro del mismo INCLUDABLE.

Garabato:
Es de hoy así que tiene tiempo para probar :D

Responder
José GDF  

Me gusta. Me lo anoto para jugar con esto más adelante. Ahora estoy en un período de descanso de códigos, después del estreno de mi nueva plantilla, que lo mío me ha costado... :S

Lo realmente sorprendente es que se pueda conseguir tanto efecto con tan pocas líneas de código. Eso en la actualidad va a estar muy demandado, para dar vida a los diseños sin recargar demasiado el peso de las páginas. Y que no requiera librerías de ningún tipo es también un logro.

Responder
Graciela  

Delicado y fácil, me encanta, buen lunes y arriba que ganamos! :P

Responder
VeoDivx  

Esto es lo que buscaba por decir algo, me va ha venir bien en un blog que tengo, cuando termine el blog ya te lo enseñare..

Un saludo...

PD: Llevo días que en los blog que tengo, dan todos un error.

Detalles de error de página web
Agente de usuario: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729) Fecha: Mon, 8 Mar 2010 11:10:35 UTC

Mensaje: Acceso denegado.
Línea: 197
Carácter: 78
Código: 0
URI: http://www.blogger.com/static/v1/widgets/XXXXXXXXXX-widgets.js

Responder
Gem@  

Mi emoticón no era ese sino este :D sorry.

Responder
Gem@  

Cuando veo algo que no necesita librerías y funciona bien pienso que hay gato encerrado, una se vuelve escéptica hasta que algo nos hace cambiar.
Muy finos y elegantes los ejemplos :S

Responder
Alejandro Araneda  

Hola. Para quien pueda interesarle, he diseñado un menú horizontal tipo acordeón con solo CSS. Para agregarle el efecto deslizante se puede utilizar SMIL para IE (HTML + TIME) y "CSS3 transitions" para el resto. Creo que tomando el diseño de menú desplegable de Timo (que reseño en la bitácora) y agregando SMIL y CSS3 se podría conseguir el mismo efecto que se reseña JMiur, sin javascript. Enlace: http://alejandroaraneda.blogspot.com/

Responder
Garabato  

Venía bien, pero tengo otro problemita JMiur… ahora he descubierto que en los blogs donde he puesto reproductores de audio para ejecutar, entro y arrancan todos a la vez. Ya lo noté en 4 así que presupongo que eso me está sucediendo en todos.

¿Ahora que pasó? ¿le pasa a alguien más o es a mis garabatos que les chifla el moño?

Responder
JMiur  

No, no hay gato encerrado :D Es bastante simple y el código es muy corto.

VeoDivx:
Ese error es general y es un error de un script de Blogger mismo. Ignóralo. No es de IE sino que se produce en todos los navegadores.

Garabato:
¿Quñe reproductores son? ¿De Goear? Si es así, fíjate en los comentarios de esta entrada. Ahí, k_nelita hace la misma pregunta y hay alguna solución al respecto.

Responder
GARABATO  

Gracias JMiur, lo he leído y está bueno… lo malo es que se cambian de a uno y eso multiplicado por no sé cuantas entradas de no se cuantos blogs… se me hace como mucho, así y todo, he comprobado que a goear le a tomado como una especie de ciclotimia compulsiva que, sumada a la mía, hace que no me sienta tan sola aquí adentro.

Y ahora resulta que se quedaron todos mis blogs calladitos… no hay prenda que no se parezca al dueño, che!!

GRACIAS OTRA VEZ. ya me pongo a renegar, digo a trabajar :)

Responder
Don Choky  

Excelente, funciono lo de cambiar la localizacion del formulario de comentarios incrustado. Muchas gracias

Responder
JMiur  

Garabato: Evidentemente, es un error garrafal de goear.

Don Choky: Me alegro que se entendiera la idea; era difícil de explciar en un comentario :D

Responder
k_nelita  

Así medio entredormida que estoy, vi que hablaban de Goear ¬¬ Propongo que todos los damnificados les escriban y digo escriban, porque yo ya lo hice, y todavía ni una respuesta... pero si somos muchos tal vez se pongan las pilas y hagan algo, yo tampoco tengo ganas de cambiar uno por uno todos los códigos, en todos los blogs, porque no es solo Folktango, tengo reproductores de ellos en los 4 o 5 blogs que tengo...
Ahora voy a la otra entrada a decir lo mismo a los que tienen el mismo problema, y sinó queda la otra que propusiste a alguien JM de hacer un script para que los reconozcan todos los navegadores, yo te vi, vos dijiste eso... estoy esperando esa entrada... o la respuesta de Goear!
Saludos ;) Escribo allá si puedo y me voy a dormir chauuu :)

Responder
Taldea  

Es mi primer comentario y lo primero que voy a hacer es darte la enhorabuena por el includable trabajo que realizas, darte ánimos para continuar siendo, sin duda, el mejor blog en estos temas, por la forma que explicas las cosas y el curro de poner los ejemplos, gracias.
Después del jabón viene la pregunta:
Entiendo que donde pone "NombreClase" es un parámetro que se puede cambiar por el nombre de una clase programada para poder cambiar la cabecera y el título en el momento de desplegarse el invento, por ejemplo
.NombreClase {
.......... }
var otroSlider=new accordion.slider('otroSlider');
otroSlider.init('otroID',0,'nombreClase');

El caso es que a mi no me funciona, funciona todo de maravilla, incluso llamando a la función desde el interior del post, pero no me cambia nada en el momento de desplegar, lo quiero para poder poner el clásico triángulo 'down' y 'up'.
¿Que hago mal?

Responder
JMiur  

k_nelita:
La respuesta sale publicada en un rato pero n oresuelve el tema hacia atrás sino hacia adelante; algo es algo :D

Taldea:
En tu blog de pruebas lo veo funcionando bien con ambas imágenes permutando.

Responder
Junior  

Hola siempre me gustan este tipo de codigos pero nunca he podido entender que es el CSS donde esta? como lo configuro? en que parte de la planilla hay que colocarlo me gustaria que me ayudaran...Gracias

felicidades exelente blog

Responder
JMiur  

Fíjate en esta entrada.

Responder
Garabato  

eL TIEmpo PaSA y NOS vaMos PonIENDO vieJos....

los acorDEONEs no se han LLEVAdo bien coN ESTe garaBATO... ABANDONO JMiur

gracias y sigo probando con otra cosa. (volveré por aquí el año que viene) :)

Responder
JMiur  

Nunca pierda las esperanzas :D

Responder
GARABATO  

Ok, yo no pierdo las esperanzas y vos prometeme que nunca vas a perder la paciencia.
Pruebo una vez más y vuelvo a mostrarte mi fracaso con tooooodas las esperanzas ... ;)

Responder
JMiur  

:D

Responder
alfonso martínez  

ola JMiur, una vez más intentaré confiar en tu saviduria, siempre lo hago y siempre funciona...pero esta vez creo que ando mas perdido que nunca con los css.

Mi consulta es la siguiente:
Me gustaria crear un blog minimalista en el que la estructura fuera simplemente un menú desplegable, es decir que se viera la cabecera y abajo el menú desplegable con todo el contenido del blog, serian unas 6 pestañas. Esto creo que es posible, como siempre bien dices tu pero no se ni por donde empezar. Leí todos tus post referentes a los css y no llego a que me funcionen.
Simplemente me gustaria tener un post con este menú desplegable como hiciste tu para este ejemplo, luego yo me encargaria de modificar la propiedades de color etc...

el 1er paso lo entiendo, (copio el codigo antes del cierre de head, a partir de aquí me pierdo.

Te agaradezco la paciencia una vez mas. Espero que me funcione si no me conformaré con otro tipo de blg.

Muchisimas gracias.

Responder
JMiur  

Teniendo el script y el CSS agregados, entiendo que lo que te falta es el HTML que es el que deberás colocar en un post.

A ver si esto ayuda. En este archivo de texto está el ejemplo tal como se muestra en esta entrada.

Responder
alfonso martínez  

Muchas gracias, pero sigue sin funcionarme...mi mayor problema está en que no se donde poner cada bloque de codigo, el unico que si se donde ponerlo es el primero, el bloque que se puede ocultar o no (el de scrip type), los siguientes ya no se donde ponerlos. Ni los css( style type='text/css') ni tampoco los (DL DT DD).

En fin, estoy perdiendo la esperanza, si puedes ayudarme te lo agradeceria muchisimo, si no pues...igualmente te lo agradeceré pero habré fracasado esta vez.

Un saludo muy fuerte, desde España.

Responder
JMiur  

El CSS va antes de </head>

El resto, es HTML así que si lo quieres agregar a una entrada, simplementeva en un post.

Responder
alfonso martínez  

Muchas gracias, parece que comienza a funcionarme, aunque no del todo bien, ya mi las areglaré para que termine de funcionar a la perfección e intentaré personalizarlo.

un saludo.

Responder
JMiur  

Si logras entender la estructura, todo será más sencillo; puede ser engorroso al comienzo pero se simplifica porque todas las pestañas son iguales.

Responder
EmmaX  

Amigo puse todo tal cual esta explicado en el post y no me funciono..

el scrip lo coloque antes del /head al igual que el CSS y luego añadi el ultimo codigo antes del /body, pero cuando quiero colocar el acordeon en un gadget html, no se expande ni colapsa, queda todalmente fijo. podrias verlo y decirme que puedo estar haciendo mal??

lo intente agregar en este blog de pruebas http://emmaxvega.blogspot.com

Espero tu respuesta y desde ya muchas gracias

Responder
JMiur  

Ahí hay un error que debes corregir primero. Dice:
slider1.init("nombreInstancia"");
y debería decir:
slider1.init("nombreInstancia");
hay una comilla que sobra.

Responder
Nelson Diaz  

Saludos amigo, mis disculpas por lo repetitivo de mis consultas : )

Y mi gratitud por tu amabilidad siempre. te cuento amigo que este efecto lo he utilizado en mi nuevo blog, en el post que he preparado para que permanezca de Bienvenida, pero me da el inconveniente de que no se ejecuta bien siempre en algunos navegadores, algo que me parece extraño pues tu ejemplo no da problemas, al momento de escribir esto he probado ambos (el de mi blog y el de este artículo) en los navegadores mas conocidos y el mio es le que presenta problemas, evidentemente algo hice errado, ¿Como podría detectar que falla amigo? o en todo caso, ¿Existe otro metodo mas facil de implementar que recomiendes? Gracias de antemano nuevamente, te dejo el link del blog: http://inconceptdiscplay.blogspot.com/ Un abrazo amigo y excelente fin de semana para usted y los suyos.

Responder
JMiur  

Pués no, lamentablemente, no sé que puede estar ocurriendo; aparentemente, no hay errores visibles pero desconozco el motivo por el que ocurre eso en tu blog. Puede ser algún script incompatible.

Responder
kawsaqi  

Es un placer saludaste broth, muy espectacular todo el contenido de este blog.
tego una dificultad en poder hacer funcionar esto a pesar que puse tal y como se indica, el javascript y contenido antes del /head y luego el css despues de jacascrip y antes de /heat, y luego los ùltimos còdigos antes de /body. luego implemento el html en una entrada, y se muestra estàtico, en base a esto, no puedo implementar el contenido sin antes saber que es lo que està fallando, he intentado hacer de todo lo que està a mi alcance pero aùn no lo logro. espero me pueda dar una ayuda, me serà de gran utilidad implementarlo en mi blog, desde ya muchas gracias,, aquì el link http://legionfactory.blogspot.com/2012/03/123.html

JMiur  

Aparentemente, hay una colila que sobra acá:
slider1.init("nombreInstancia"")
debe ser:
slider1.init("nombreInstancia")

kawsaqi  

"exelente", logré dar con ese punto y lo modifiqué, ahora el acordeón se muestra serrado, y por ningún motivo logra abrir, he realizado un minucioso chek, pero no logro encontrar con el problema, sé que en algo esto fallando, como el primer caso, si no sería de mucha molestia, necesito una vez más su ayuda. saludos cordiales.

JMiur  

Tal como está, el script no se ejecuta. Prueba escrbiéndolo así:

<script type="text/javascript">
//<![CDATA[
var slider1=new accordion.slider("slider1");
slider1.init("nombreInstancia",0,"open");
//]]>
</script>

kawsaqi  

lo logreeé!! mucha gracias men,, saludos desde Perú.

Responder
kawsaqi  

hola siempre hay algún detalle, me puedes dar alguna sugerencia para poder hacerlo , más ligero al parecer cuando se da función, se vuelve muy pesado, no sé si es por los implementos de flash en mi blog, espero su comentario,, un gran post.

kawsaqi  

pude solucionar el problema sobre hacerlo más ligero, pero tengo que expandir con gatget, la lista del lado izquiero, me he dado cuenta que su ejemplo no contrae la entrada, al momento de dar función al acordión, cómo puedo lograr eso en mi blog. Saludos

JMiur  

No entiendo a qué te refieres.

Responder
kawsaqi  

hola de nuevo, hay un slider muy interesante, pero no entiendo como puede funcionar sin mucho código, aquí te dejo el link, es posible que a usuarios de este genial blog les interse,, http://www.zurb.com/playground/orbit-jquery-image-slider

JMiur  

No parece tener poco código; es este:
http://www.zurb.com//javascripts/plugins/jquery.orbit.min.js
y además debes tener la librería jQuery agregada.

Responder
kawsaqi  

HOLA DE NUEVO, IMPLEMENTÉ RESIENTE MENTE EL ACORDIÓN, A MI BLOG, http://legionfactory.blogspot.com/2012/03/tituloenlace-ejemplo-1.html

LO QUE PASA ES QUE EN LA PARTE INFERIOR DE LA PÁGINA SE MUESTRA ESTE CÓDIGO: var miSlider=new accordion.slider('miSlider'); miSlider.init('miID'); var otroSlider=new accordion.slider('otroSlider'); otroSlider.init('otroID',0,'nombreClase'); PUES TODO FUNCIONA A LA PERFECCIÓN, PERO SIN DUDA PIDO SU AYUDA PARA PODER DARLE UNA SOLUCIÓN A ESTE INCONVENIENTE, DESDE YA MUY AGRADECIDO, POR SU TRABAJO TIEMPO Y ESFUERZO.

JMiur  

Se ve eso porque es lo que está escrito en tu plantilla; simplemente, debes borrar ese texto:

</style>

var miSlider=new accordion.slider('miSlider');
miSlider.init('miID');

var otroSlider=new accordion.slider('otroSlider');
otroSlider.init('otroID',0,'nombreClase');

<script type='text/javascript'>

kawsaqi  

ok,, ahora se ve bien, muchas gracias! saludos cordiales

Responder
VILLEDA  

JMiur excelente aportacion gracias se ve genial, solo tengo dos dudas espero me puedas ayudar,
1. la etiqueta
var miSlider=new accordion.slider('miSlider');
miSlider.init('miID');

var otroSlider=new accordion.slider('otroSlider');
otroSlider.init('otroID',0,'nombreClase'); donde lo pongo como se instala? o se tiene que poner entre alguna etiqueta?

por lo demas lo hice como esta en el blog pero no hace el efecto de expandirse ni de retraerse se queda estatico, que puedo hacer?

gracias por tu ayuda y or tu tiempo,

saludos

JMiur  

Esos códigos son JavaSript así ique deben ser colocados entre etiquetas <script> y </script>, ya sea antes de &lt/body> o justo después del HTML.
Debería saber dónde está tu ejemplo para verificar el problema.

VILLEDA  

Gracias JMiur por tu tiempo, esta es la dirección http://www.vtrautoscorp.com/2012/04/blog-post.html quiero usarlo en una entrada y ya tengo todo instalado como explicas en el blog pero no que esta mal, gracias por tu ayuda


saludos cordiales

JMiur  

Tienes que colocarle los nombres a los IDs que vas a usar; en la entrada dice esto:

Hay dos IDs que son importantes:

nombreExclusivo es el del DIV contenedor; si tenemos varios de estos acordeones, cada uno debe tener un nombre diferente
nombreInstancia es el de la etiqueta DL y será el que usemos para inicializar las funciones del script

y son esos nombres los que debes definir; son los nombres con los que se los llama en al función

VILLEDA  

Hola JMiur coloque un nombre exclusivo en el div y tambien remplace nombre exclusivo en el css (style type='text/css'>
#nombreExclusivo....) por el que puse en el div

coloque un nombreinstancia en el div (dl class="accordion" id="nombreInstancia">)

pero el efecto que obtuve fue el siguiente:
http://www.vtrautoscorp.com/2012/04/blog-post.html

algo mas me falta verdad?

disculpa tanta molestadera y gracias por tu valiosa ayuda

JMiur  

Tanto los IDs com olas clases, no pueden contener espacios ni caracteres especiales así que deberías modificarlos. Puedes usar guiones:

datos-del-vehiculo
datos_del_vehiculo

VILLEDA  

una pregunta JMiur en este script tengo que cambiar el ('miID') y el 'miSlider'? que deberia colocar alli?

yo lo coloque como esta a continuacion, tambien elimine los espacio por guiones como me digiste

...script>var miSlider=new accordion.slider('miSlider');
miSlider.init('miID');var otroSlider=new accordion.slider('otroSlider');
otroSlider.init('otroID',0,'nombreClase');</script...

JMiur  

Un ejemplo; suponiendo que la etiqueta DL tuviera como ID "vehiculo"

<dl id="vehiculo" class="accordion">

la funcion se crea y ejecuta así:

var slider1=new accordion.slider("slider1");
slider1.init("vehiculo",0,"open");

Si tengo otro cuyo ID es "ejemplo"

<dl id="ejemplo" class="accordion">

la funcion para ese otro seria así:

var slider2=new accordion.slider("slider2");
slider2.init("ejemplo",0,"open");

VILLEDA  

Hola JMiur gracias enserio que me quebré la cabeza un buen rato gracias por tu ayuda me quedo excelente, y disculpa la molestadera te agradezco mucho sos Genio

saludos cordiales,

http://www.vtrautoscorp.com/2012/04/blog-post.html

JMiur  

Si se resolvió, todo está perfecto :-D

Responder
Unknown  

alguien sería tan amable de dejar el código completo por favor... es urgente, gracias

JMiur  

Es imposible que sea urgente XD

Y el código está en la entrada.

Responder
Localiza Recursos Sociales en el Municipio de Oviedo  

Hola JMiur:Ya estoy aquí de nuevo necesitando de tu ayuda.Estoy bloqueada de darle vueltas y queda siempre estático.Lo quiero cerrado y donde he puesto "boletínes"me gustaría que apareciesen uno bajo otro en vertical y me quedan horizontales.Demasiado inútil para tanto código.Si puedes echarle un vistazo mi blog de pruebas es el siguiente:
http://ultreia5.blogspot.com.es/ Muchas gracias

JMiur  

Puede ser porque estás usando textos que en JavaScript no son malinterpretados tales como acentos o los dos puntos de los títulos (Léalo:) etc.

Responder
Localiza Recursos Sociales en el Municipio de Oviedo  

Hola:Ya he modificado tu indicación y sigue igual

JMiur  

Es que el script que tienes al final y ejecuta el acordeón, es erróneo; dice esto:

var slider1=new accordion.slider("slider1");
slider1.init("LEALO");
var slider2=new accordion.slider("slider2");
slider2.init("ACCESO A LA CIUDADANIA");
var slider3=new accordion.slider("slider3");
slider1.init("BOLETINES");

Lo que indica la entrada es que hay dos datos a colocar y definir; nombreExclusivo y nombreInstancia que son los IDs de dos etiquetas:
<div id="nombreExclusivo">
<dl class="accordion" id="nombreInstancia">

En tu ejemplo, estás dejando esos dos nombres y el ID que debe indicarsele al script es el de la etiqueta DL; el script al final del sitio debería decir:

var miSlider=new accordion.slider("miSlider");
miSlider.init("nombreInstancia",0,"open");

Responder
Localiza Recursos Sociales en el Municipio de Oviedo  

Gracias JMiur por tu atención,tampoco conseguí hacerlo.Cansada decidí cambiarlo por Acordeones simples con jQuery. Creo que este quedó bien.Un saludo y muchas gracias

Responder
EmmaX  

hola jmiur, bueno este acordeon ya lo implemente en mi pagina hace mucho tiempo y me funciona perfecto, hasta me hice un menu desplegable con él ja..
mi duda es si tenes alguna idea de como editar la funcion javascript para que solo tenga el efecto de la transicion de opacidad?
por lo que veo usa tanto la transicion de la opacidad como la de la altura, para generar el afecto que se ve, yo solo quisiera que tome en cuenta la opacidad..

no se si me termine explicando bien pero esto se puede hacer?

JMiur  

No, no tengo idea. El código es demasiado engorroso para mi entendimiento.

EmmaX  

ahh lastima, bueno, te tengo otra consulta ja, mil disculpas por mi insistencia pero a veces esto me apasiona demasiado ja..

con respecto a este acordeon, yo queria que lo que este oculto no se cargue hasta que sea visible, osea, que no solo no se muestre sino que no se cargue, como para no ralentizar la carga de la pagina..

estoy tratando de implementar esta pequeño script que elabore

http://www.itaka-host.com.ar/gif/vagabundia.jpg

el script en si funciona, pero no me acepta el cambio de clase cuando el acordeon cambia de ventana, no se si me explico, cuando uno hace click en un elemento, la clase cambia de "novisible" a "visible" y viceversa.. bueno, mi script no se da cuenta de ese cambio por asi decirlo y sigue mostrando lo mismo siempre.. no se si me explique como queria, pero tenes alguna idea de como hacer para que este script o alguno parecido haga lo que deseo??

tambien una duda que tengo es si este script sirve realmente para evitar la carga innecesaria de los elementos que estan ocultos..

JMiur  

Se ejecuta sólo una vez porque así está definido. Para detectar si "algo" cambia se deben usar eventos y para eso, hay una instrucción llamada addEventListener (o attachEvent en IE). Deberías fijarte su sintaxis y ver si cumple con lo que quieres hacer.

Ahora bien, si lo que quieres hacer es que ciertos contenidos de un acordeón no se carguen, el evento ya existe, es el que se ejecuta cuando haces click en la pestaña correspondiente y es ahí donde deberías cargar el contenido pero eso tiene sus bemoles.

Para empezar ¿dónde estará ese contenido? Debe ser un archivo externo. Por lo general, eso se hace con AJAX algo que en Blogger no puedes usar ya que se requiere que los archivos a cargar estén en el mismo dominio.

Por otro lado, toda carga externa es lenta y eso podría ser contraproducente. Depende del tipo de contenido de esas pestañas.

EmmaX  

Primero gracias por tu respuesta, mira, yo lo uso para un portal de un foro phpbb3, lo que tengo dentro de las pestañas del acordeon son varias cosas, desde listas de links, texto, imagenes y hasta elemntos flash, como un chat..

mi idea es tratar de que no se carguen hasta que se haga click para mostrarlos asi la carga de la pagina principal se hace mas rapida..

yo creia que usando javascript podria lograrlo, es mas, crei que con ese pequeño script que te mostre estaba casi por hacerlo ja..

entonces vos me recomendarias probar con ajax o ese evento que nombraste puede serme util??

JMiur  

Ajax es JavaScript y es la forma natural de cargar contenido externo desde el mismo dominio y eso, puede hacerse mucho más facilmente utilizando alguna librería como jQuery para la que encontrarás muchisima información en la web y es sencilla de usar; con un par de líneas.

También puede hacerse sin librerías:
http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_first

Porque salvo que el contenido sea poco, usar document.write no tiene sentido ya que el código a escribir será excesivametne largo y difícil de editar.

Si lo que se quiere cargar son scripts, peude hacerse de manera dinámica:
http://vagabundia.blogspot.com/2010/06/cargar-scripts-de-manera-dinamica.html

Responder
EmmaX  

ahi esta, es justo lo que necesitaba.. muchas gracias jmiur, nunca es errado consultarte algo ja.. saludos

Responder
melk2606  

Estoy incrustando entre las etiquetas dd un iframe de una pagina con un scrolling de imagenes alineadas horizontal..en todos los navegadores se ve bien, a excepcion de firefox, me muestra las imágenes del iframe en vertical..

JMiur  

Sij ver el ejemplo, imposible saberlo.

Responder

¿Quiere dejar un comentario?

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

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

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