Crear un "paso a paso" en pagina Facebook

Podemos crear un paso a paso en nuestra pagina Facebook para explicar algo de forma mas detallada.

Un paso a paso consiste en mostrar contenido por parte, accediendo a la parte siguiente al hacer clic en, este caso, una flecha.

Antes que nada debemos colocar la aplicación fbml en nuestra pagina para poder colocar el código.

CODIGO:

<div >

<ul style="float:right;padding-top:10px;padding-top:-50px">

<li id="menu1" style="display:none"><a href="index.html" clicktoshow="1,menu2" clicktohide="2, 3, 4,menu1,menu3,menu4"><img src="http://img54.xooimage.com/files/8/b/f/derecho-icono-8141-128-24476fd.png"/></a>
</li>

<li id="menu2" ><a href="about.html" clicktoshow="2,menu3" clicktohide="1, 3, 4,menu1,menu2,"><img src="http://img54.xooimage.com/files/8/b/f/derecho-icono-8141-128-24476fd.png"/></a></li>

<li id="menu3" style="display:none;"><a href="services.html" clicktoshow="3,menu4" clicktohide="1, 2, 4,menu1,menu2,menu3,menu4"><img src="http://img54.xooimage.com/files/8/b/f/derecho-icono-8141-128-24476fd.png"/></a></li>

<li id="menu4" style="display:none;" ><a href="contact.html" clicktoshow="4,menu1" clicktohide="1, 2, 3,menu2,menu3,menu4"><img src="http://img54.xooimage.com/files/8/b/f/derecho-icono-8141-128-24476fd.png"/></a></li>
</ul>

<div style="float:left;
padding-left:50px;padding-top:38px;"
<div id="1" >

CONTENIDO 1

</div>
<div id="2" style="display:none;">

CONTENIDO 2

</div>
<div id="3" style="display:none">

CONTENIDO 3

</div>
<div id="4" style="display:none">

CONTENIDO 4

</div>

 podes cambiar la imagen de la flecha verde por la que desees; (http://img54.xooimage.com/files/8/b/f/derecho-icono-8141-128-24476fd.png)


Modifica lo que esta en otro color.

Crear un paso a paso consiste en modificar los "id" de los elementos o agregar elementos, y asi podemos mostrar dos pasos en ves de uno (ejemplo aquí), o agregar mas pasos, todo es modificable.

Este seria el resultado:

Al hacer clic en la flecha pasara al contenido 2, y así sucesivamente.