Simple Sliding Horizontal Pull Tabs

Nada más, y nada menos, que unas tabs que se deslizan para dejar ver un contenido oculto. Cada vez que se clika sobre una tab, las demás se "desvanecen". Y, como siempre, para entender de qué se trata, nada mejor que visitar el hack original en aikido. Picad sobre las fotos de los "ejecutivos" y veréis las tabs en funcionamiento. Podéis ver mi prueba en este blog de pruebas

El CSS es cosa de cada uno, de manera que aquí hay poco que orientar...

.- SCRIPTS:

<script src='http://.../2_mootools.js' type='text/javascript'/>

<script src='http://.../PullTabs.js' type='text/javascript'/>

Mootools.js podéis descargarlo en cualquier parte (es más famoso que un torero). En cuanto al script Tabs.js, lo tenéis en el Foro Mootools. Copiadlo en algún sitio (bloc de notas, por ejemplo); guardadlo y subidlo a vuestro host.

.- HTML: Para mi prueba, es éste:

<h2>Los Ejecutivos</h2>

<ul class='execList' id='execMorph'>

<li style='position: relative; left: 0px; top: 0px; visibility: visible; opacity: 1;'><a class='info' href='#'><img alt='Asterix' height='192' src='http://.../asterix0.gif' width='127'/><span>Presidente <span class='name'>Axterix...</span></span></a><div class='info' style='visibility: hidden; opacity: 0;'><p>Por si vuelven los romanos</p><p><a class='return' href='#'>Regresar a la lista</a></p></div></li><li style='position: relative; left: 0px; top: 0px; visibility: visible; opacity: 1;'><a class='info' href='#'><img alt='Bob Esponja' height='192' src='http://.../bobesponja.gif' width='127'/><span>Vice-presi <span class='name'>Bob Esponja...</span></span></a><div class='info' style='visibility: hidden; opacity: 0;'><p>Vive en el fondo del mar</p><p><a class='return' href='#'>Regresar a la lista</a></p></div></li><li style='position: relative; left: 0px; top: 0px; visibility: visible; opacity: 1;'>

<a class='info' href='#'><img alt='Batman' height='192' src='http://.../batman-color.jpg' width='127'/><span>Secretario <span class='name'>Batman...</span></span></a><div class='info' style='visibility: hidden; opacity: 0;'><p>Tareas de limpieza: barriendo malvados y tal</p><p><a class='return' href='#'>Regresar a la lista</a></p></div></li><li class='last' style='position: relative; left: 0px; top: 0px; visibility: visible; opacity: 1;'><a class='info' href='#'><img alt='Fernando' height='192' src='http://.../photo00.jpg' width='127'/><span>Secretario sobre ruedas <span class='name'>Fernando Alonso...</span></span></a><div class='info' style='visibility: hidden; opacity: 0;'><p>Menuda birria de coche el Renault. ¡Animo!</p><p><a class='return' href='#'>Regresar a la lista</a></p></div></li></ul>

<p class='afterExecList'>Es bromaaa, todo bromaaaa - Menos lo del coche de Fernando: <a href='/'>decir "birria" es quedarse corto</a> ¡Briatore!: déjate de bodas y concéntrate en el coche <a href='mailto:'>(reclamaciones, aquí)</a>.</p>