Acordeón en la Sidebar o en las Entradas

Tutorial tomado de Vagabundia. El efecto es expandir o contraer un elemento, con el fin aminorar elementos en el Blog.



El siguiente tutorial es tomado de VAGABUNDIA, bajo el post Bloques animados en la sidebar.

PASOS:

1. Implementar el siguiente código antes de </head>

<script type="text/javascript" src="http://www.geocities.com/internetuide/animatedcollapse.js">
/***********************************************
* Animated Collapsible DIV- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>

2. El código para implementar un bloque expandible es el siguiente:

<a href="javascript:nombreVAR.slideit()" style=" [estilo del botón] "></a>
<div id="nombreID" style="width:100%;">
<div style=" [estilo del contenido] "> [contenido] </div>
</div>
<script type="text/javascript">
var nombreVAR=new animatedcollapse("nombreID", tiempo, estadoinicial)
</script>

Los nombres nombreVAR y nombreID deben ser únicos, si se colocan varios bloques expandibles, cada uno debe ser diferente.

El contenido de STYLE del DIV nombreID puede ser cualquier otro. Utilizando width:100% abarca el total de la sidebar.

tiempo indica la duración del efecto y es un valor expresado en milisegundos (1000 = 1segundo).

estadoinicial puede ser true o false e indica el estado inicial del bloque. Si es true, estará expandido y si es false, estará contraido.

DEMO EJEMPLO COLOCADO EN UN POST:

EJEMPLO ENLACE IMAGEN:

<div style="width: 100%;">
<a href="javascript:nombreVAR.slideit()" style=""><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 100%; height: 25px;" src="url_de_la_imagen" border="0" /></a>

<div id="nombreID" style="width: 100%; background-color: rgb(255, 255, 255);">
<div style="padding: 5px; color: rgb(0, 0, 0);">
Colocar el texto que irá dentro de la caja que se expanderá.
</div>
</div>
<script type="text/javascript">var nombreVAR=new animatedcollapse("nombreID", tiempo, estadoinicial)</script>
</div>

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

Ejercicio para realizar en clase:

EJEMPLO ENLACE TEXTO:

<div style="width: 100%;">
<a href="javascript:ejemploA1.slideit()" style="">[+/-] EXPANDIR / CONTRAER</a>
<div id="A1" style="width: 100%; height:100px; background-color: rgb(255, 255, 255);">
<div style="padding: 5px; color: rgb(0, 0, 0);">
Colocar el texto que irá dentro de la caja que se expanderá.
</div>
</div>
<script type="text/javascript">var ejemploA1=new animatedcollapse("A1", 100, false)</script>
</div>

[+/-] EXPANDIR / CONTRAER

Colocar el texto que irá dentro de la caja que se expanderá.

Otra ejercicio para aplicar en clase:

Cuando se desea colocar un enlace para EXPANDIR y otro para CONTRAER.

<a href="javascript:ejemploA3.slidedown()">EXPANDIR</a> || <a href="javascript:ejemploA3.slideup()">CONTRAER</a>
<div id="A3" style="width: 100%; height: 100px; background-color: #dadfdf;">
<div style="color: rgb(0, 0, 0); text-align: center;">
 Colocar aquí texto que se expanderá y contraera al ejecutar cada acción del enlace.
 <script type="text/javascript">var ejemploA3=new animatedcollapse("A3", 500, false)</script></div></div>

EXPANDIR || CONTRAER

Este es el contenido del DIV.