JMiur [E]

Acordeones son esos efectos de los que mucho se ha publicado en los últimos tiempos y que muestran y ocultan bloques de una manera similar a lo que puede hacerse con el efecto Toggle o con el script que simula animaciones pero al que se le agrega un detalle distintivo; dado un grupo de elementos ocultos, al hacer click sobre los botones, no se expanden y contraen de manera independiente sino que todo el grupo cambia, es decir, si despliego uno, el que antes estaba expandido se cierra por lo tanto, el espacio que ocupa todo el conjunto no se modifica.

Difícil de contar en palabras, mejor dos ejemplos:


Mirando aquí y allá, se encuentran varios scripts para crearlos utilizando las librerías de prototype y scritpaculous. El más difundido es Accordion v2.0 pero, personalmente, me ha resultado complicado de aplicar y no hay una buena explicación al respecto. Es, seguramente, el más sofisticado porque permite crear acordeones horizontales y meter unos dentro de otros pero no es el único modelo, hay muchos otros; por ejemplo, en Graphics by Greg describen uno paso a paso e incluyen una página con un ejemplo online; lo mismo puede decirse de otros sitios que disponen de efectos similares para diferentes librerías: Phatfusion, Let me have a blog, Solutoire, PortalZine, moo.fx, DezinerFolio, etc.

Algunos son espectaculares, otros sencillo, algunos tienen problemas en ciertos navegadores, otros son complejos de adaptar a Blogger; personalmente, me quedé con la idea que explican en el mismo sitio de scritpaculous pero simplificándola aún más porque el concepto de un acordeón puede reducirse a esto: hago click en un enlace y, antes de mostrarlo, oculto el anterior así que el script a usar debería ser mínimo y todo lo demás lo ´podríamos resolver con CSS.

Primero que nada necesitamos las librerías que, si no estamos usando, descargamos de su sitio oficial, alojamos en un servidor y luego, las cargamos agregando el siguiente código, justo antes de </head>:
<script src="URL/prototype.js" type="text/javascript">
<script src="URL/scriptaculous.js?load=effects" type='text/javascript">
Y debajo de eso, el script específico que controlará el efecto y un poco de estilo a gusto de cada uno:
<script type="text/javascript">

// los valores iniciales
var cual=0;
var ultimoEnlace='enlacepanel1'; // el botón del panel que está desplegado
var ultimoPanel='panel1'; // el panel que está desplegado

function mostrarPanel(enlace,cual) {

if (enlace==ultimoEnlace)return false; // si ya está desplegado, no hacer nada

// ocultar el panel desplegado y cambiar la clase del enlace
Effect.toggle(ultimoPanel,'blind');
document.getElementById(ultimoEnlace).className='panelOculto'

// desplegar el nuevo panel y cambiar la clase del enlace
document.getElementById(enlace).className='panelVisible'
Effect.toggle(cual,'blind');

// guardar el los nuevos datos del panel desplegado
ultimoEnlace=enlace;
ultimoPanel=cual;

}

</script>

<style type="text/css">
#acordeon { /* es todo el bloque */
width: valorpx; /* el ancho */
/* agregamos propiedades varias */
}

.panelOculto { /* es el botón de los elementos ocultos */
display: block;
width: valorpx; /* el mismo ancho que #acordeon */
height: valorpx; /* la altura del botón */
background: valores;  /* una imagen de fondo, un color */
/* propiedades de las fuentes, márgenes, bordes, etc */
}

.panelVisible { /* es el botón del elemento visible */
display: block;
width: valorpx; /* el mismo ancho que #acordeon */
height: valorpx; /* la altura del botón */
background: valores;  /* otra imagen de fondo, otro color */
/* propiedades de las fuentes, márgenes, bordes, etc */
}

#panel1, #panel2, #panel3, #panel4 { /* enumeramos los botones */
width: 100%; /* el ancho que uno quiera */
height: valorpx; /* si queremos que la altura no sea fija, eliminamos esto */
overflow: hidden;
}

.panelContenido { /* lo que hay dentro de cada panel */
margin: 0;
padding: 0;
height: valorpx; /* si queremos que la altura no sea fija, eliminamos esto */
}
</style>
Ahora hay que explicar un poco y ver cómo lo usamos.

Vamos a crear un acordeón con cuatro botones que serán enlaces y que tendrán cualquier diseño o serán imágenes. Al hacer click en ellos se desplegará un sector con cierto contenido y se cerrará el que esté abierto. El primer enlace, por defecto estará abierto. Todos los "botones cerrados" tendrán un diseño gráfico común y el "botón abierto" un diseño gráfico diferente.

En este ejemplo, el primer botón se llamará enlacepanel1 y los demás enlacepanel2, enlacepanel3 y enlacepanel4. Los botones cerrados tendrá una clase CSS llamada y el abierto, una clase llamada panelOcultopanelVisible.

El contenido de cada uno estará dentro de DIVS que se llamarán panel1, panel2, panel3 y panel4 respectivamente y tendrán una clase CSS común llamada panelContenido.

El HTML a utilizar sería este:
<div id="acordeon">

<div><!-- el primer panel -->
<a class="panelVisible" id="enlacepanel1" href="javascript:void(0);" 
onClick="mostrarPanel('enlacepanel1','panel1'); return false;">
EL TEXTO DEL BOTON 1
</a>
<div id="panel1" style="margin: 0;padding: 0 0 5px 0;">
<div class="panelContenido">... el contenido ...</div>
</div>
</div>

<div><!-- el segundo panel -->
<a class="panelOculto" id="enlacepanel2" href="javascript:void(0);"
onClick="mostrarPanel('enlacepanel2','panel2'); return false">
EL TEXTO DEL BOTON 2
</a>
<div id="panel2" style="display:none;margin: 0;padding: 0 0 5px 0;">
<div class="panelContenido">... el contenido ...</div>
</div>
</div>

<!--
los otros paneles tendrán un código similar
sólo cambiaremos los nombres y los contenidos de cada uno
-->

</div>

26 comentarios:

Gem@  

La moo.fx es muy sencilla pero fantástica.

Responder
JMiur  

Hay mucho para ver :D

Responder
Ester  

Hola JMiur!
He estado haciendo pruebas con el código y a pesar de que es posible que me haya equivocado al modificar alguna variable, lo que obtengo al guardar el template es una respuesta de Blogger diciendo que el XHML no es válido.

He estado mirando otras páginas con acordeones y parece que si no pasas el template al modo clásico no funciona...

¿Alguna sugerencia? Te lo agradecería mucho.

Saludos!!!

Responder
Ester  

Perdón, se me olvidó añadir que lo mismo me ha ocurrido al intentar implementar este template:
http://www.bloggertemplates.org/review/artica

Sólo he conseguido que funcionara todo al poner el template en classic mode :(

Responder
JMiur  

Esta no es una plantilla clásica y, como ves, allí está así que, ese impedimento no existe.

¿El mensaje dice algo más? ¿Indica qué no es aceptable?

Probemos por partes. Tanto el script como el style van antes de </head>. Copio y pego el código del post en la plantilla. Vista Previa y no debe haber error (lo estoy haciendo al mismo tiempo que lo escribo). Esa parte no contiene nada especial, ningún código que pueda producir un error.

La segunda parte (el DIV) va en un elemento HTML, en un post o donde uno quiere mostrarlo.

Haciéndolo así, en dos pasos ¿dónde se muestra el error?

Responder
Ester  

Qué rapidez contestando, mil gracias!
No voy a poder probarlo otra vez hasta el lunes, aquí en España ya es hora de prepararse para salir a cenar ;)

Pero una cosa, que no por básica me puede haber llevado a error...
Entiendo que en el código, debo sustituir los textos en color crema por los que yo quiera implementar, no? Básicamente son los valores en pixels y luego modificar el enlace a los *.js* que debo alojar en algún sitio.

Más que nada porque igual resulta que me equivoco en algo tan básico como esto...

Gracias!

Responder
JMiur  

Lo que dices es correcto.

Allí comienza el problema de definir esos valores. Cualquier cosa, te paso el código del ejemplo para que tengas un modelo inicial.

Responder
Ester  

Pues nada, te envío un email para que me pases el código, me será de gran ayuda ;)

Mil gracias de nuevo

Responder
JMiur  

OK, en cuanto pueda te lo envío.

Responder
Ester  

Por si a alguien le ocurre lo que a mi, quiero dejar constancia que me equivocaba al no subir también el fichero "effects.js".

Por lo demás, agradecerle a JMiur su ayuda pasándome el código y rectificando mis errores :)

Saludos!!!

Responder
johanna  

hola sii una pregunta alguien me podria pasar el modelo iniciañ del acordeon? me sería de mucha ayuda
gracias
jo

Responder
JMiur  

¿A qué t refieres con el modelo inicial?

Responder
ERIC  

Hola JMiur
Necesito que me expliques
como alojar las librerias
en un servidor y cual me
recomendarias.Tal vez sea
algo sencillo pero no se
hacerlo.
Te agradezco por la bondad
Que te siga llendo exelente
con el blog

\(87)/....***ERIC***....[79]

Responder
JMiur  

La forma más sencilla es usando Google Pages. En este post está explicado con detalle.

Si no, puedes crear una cuenta en algún otro servicio como Hostfile.

En todos los casos el procedimiento es similar, subes el archivo y el servicio te da la dirección URL que es la que usas en la plantilla.

Responder
ERIC  

Muchas gracias
JMuir
Espero que estes bien
cuidate
y saludos

\(87)/....***14.ERIC.14***....[79]

Responder
Hugo Villa  

Hola, por favor me podrias decir que es lo que tengo que modificar para que todos los menus se inicien cerrados?,

De antemano, Gracias

Responder
JMiur  

Hugo: en el ejemplo, la clase class="panelVisible" hace que aparezca abierto y la clase class="panelOculto" hace que aparezca oculto así que basta que todos tengan la clase class="panelOculto" para que de entrada se muestren cerrados.

Responder
Hugo Villa  

Gracias por tu pronta respuesta JMiur, te comento que ya le he asignado esa clase a todos y no se ocultan lo que tuve que hacer para que se ocultaran fue poner el parametro display:none, pero aun asi si trato de abrir un panel me abre el primero y al otro que le haga click creo que el problema esta en las variables:
var cual=0;
var ultimoEnlace='enlacepanel1'; // el botón del panel que está desplegado
var ultimoPanel='panel1'; // el panel que está desplegado

del ejemplo que se tiene en la parte superior.

y otra vez gracias

Responder
JMiur  

Sí, me parece que tienes razón. releyendo el script l oque parece hacer es permutar un estado por otro siempre así que siempre debe haber uno abierto.

Lamentablemente, la página original no existe proque habría que modificar ese script para que hiciera eso que quieres.

Responder
Anahí  

JMiur, le pido un favor, ¿me traduce cuál sería el título de cada panel para poner la imagen de fondo? ¿cómo seria x ej. 3 paneles y en c/título 1 img.? Como los de arriba.
Gracias, y salu2

Responder
Anahí  

JMiur, creo que ya lo resolví. Ahora tengo que ver para qué lo uso... *_*
Saludos

Responder
JMiur  

Me alegro Anahí :D

Responder
Allende La Paz  

JMiur: algo así estoy buscando para colocar en el lado derecho de mi blog (Revista de Prensa: Colombia-Latinoamérica-Mundo).

Tengo que trabajarla un poco hasta que al fin la domine. Soy algo torpe con esto.

Te agradezco tus respuestas porque son realmente esclarecedoras.

Saludos,

Allende La Paz

Responder
JMiur  

Espero que sirva, Allende :)

Responder
Allende La Paz  

JMiur: Sirvió y de qué manera. Tengo algunos interrogantes:

1- Cómo hago para que se vea como el del ejemplo pero con otros colores.
2- Cómo hago para ponerle a cada parte una imágen.
3- Cómo hago para poner las noticias separadas, una debajo de otra.
4. Cómo hago para que se vea el acordeón cerrada.

Gracias, tú eres nuestro soporte y sé que tu recompensas son las millones de gracias diarias que todos te damos de diferentes partes del mundo.

Gracias, a la n veces,

Allende La Paz

Responder
JMiur  

Allende:
En esa parte desde <style type="text/css"> hasta </style> están las diferentes propiedades a personalizar: background es el color de fondo por ejemplo.
Son enlaces así que la imagen puede ser el fondo del enlace (otra vez, background) o una etiqueta IMG.
para que todos estén cerrados, en el ejmplo, en lugar de ponerle class="panelVisible" al primero, hay que poner en todos class="panelOculto"

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