Acordeones generados con CSS

Una forma de crear acordeones sencillos es por medio de código CSS.
Se trata de dos acordeones, uno de forma horizontal y uno vertical así que para colocarlos en tu blog lleva a cabo los siguientes pasos:

Ejemplo de un acordeón horizontal:

Incluye el CSS justo arriba de ]]></b:skin>

/* Acordeón en general */
#acordeonhorizontal {
 font: small/1.2 Arial, Helvetica, sans-serif;
 width: 500px;
 margin: 10px auto; }
#acordeonhorizontal div {
 float: left;
 width:25%;
 height: 298px;
 overflow: hidden; }
#acordeonhorizontal:hover div {
 width: 20px; }
#acordeonhorizontal:hover div:hover {
 width: 440px;
 overflow: auto; }

/* Colores de fondo */
#titulo1 {
 background-color: #EEE; }
#titulo2 {
 background-color: #DDD; }
#titulo3 {
 background-color: #CCC; }
#titulo4 {
 background-color: #BBB; }

/* Títulos */
h2 {
 font-size: 150%;
 margin: 10px 10px .2em 25px; }

/* Párrafos */
p {
 margin: 1em 25px; }

Ahora el HTML incluyelo en una entrada o como elemento HTML/Javascript

<div id='acordeonhorizontal'>
<div id='titulo1'>
<h2>Titulo 1</h2>
<p>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.</p>
</div>
<div id='titulo2'>
<h2>Titulo 2</h2>
<p>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.</p>
<p>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.</p>
</div>
<div id='titulo3'>
<h2>Titulo 3</h2>
<p>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.</p>
<p>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.</p>
<p>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.</p>
</div>
<div id='titulo4'>
<h2>Titulo 4</h2>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
</div>
<div style='float: none; clear: both; height: 0;'></div>
</div>

Ejemplo de un acordeón vertical:





De igual manera incluye el CSS justo arriba de ]]></b:skin>

/* Acordeón en general */
#acordeonvertical {
 font: small/1.2 Arial, Helvetica, sans-serif;
 width: 500px;
 height: 318px;
 margin: 10px auto; }
#acordeonvertical div {
 height:25%;
 overflow: hidden;}
#acordeonvertical:hover div {
 height: 20px; }
#acordeonvertical:hover div:hover{
 height: 340px;
 overflow: auto; }

/* Colores de fondo */
#titulo1 {
 background-color: #EEE; }
#titulo2 {
 background-color: #DDD; }
#titulo3 {
 background-color: #CCC; }
#titulo4 {
 background-color: #BBB; }

/* Títulos */
h2 {
 font-size: 150%;
 margin: 10px 10px .2em 25px; }

/* Párrafos */
p {
 margin: 1em 25px; }

Y también el HTML incluyelo en una entrada o como elemento HTML/Javascript

<div id='acordeonvertical'>
<div id='titulo1'>
<h2>Titulo 1</h2>
<p>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.</p>
</div>
<div id='titulo2'>
<h2>Titulo 2</h2>
<p>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.</p>
<p>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.</p>
</div>
<div id='titulo3'>
<h2>Titulo 3</h2>
<p>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.</p>
<p>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.</p>
<p>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.</p>
</div>
<div id='titulo4'>
<h2>Titulo 4</h2>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
</div>
<div style='float: none; clear: both; height: 0;'></div>
</div>

Por ultimo agrega más filas o columnas ya sea para el acordeon vertical u horizontal y también agrégale los párrafos que desees.

<div id='titulo1'>
<h2>Titulo 1</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
</div>
<div id='titulo2'>
<h2>Titulo 2</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
</div>
<div id='titulo3'>
<h2>Titulo 3</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
</div>
<div id='titulo4'>
<h2>Titulo 4</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
</div>
<div id='titulo5'>
<h2>Titulo 5</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
</div>