Por lo general, esto hace que el contenido se desplace hacia arriba o hacia abajo, expandiendo y contrayendo un bloque cualquiera. Para esto hay varias técnicas, alguna son sencillas, otras más complicadas.
Utilizando ese mismo criterio y librerías externas, hay métodos más sofisticados como la creación de las llamadas tabs o solapas es decir, una serie de bloques superpuestos, cada uno de ellos con un contenido diferente y del que sólo vemos uno a la vez.
Desde ya, hay que decir que esto no aliviará la carga de la página, los datos están allí, no los vemos porque los marcamos como ocultos y justamente eso es lo que permite que pasar de una solapa a otra sea un proceso rápido.
idTabs es una opción que funciona con el framework jQuery. Su uso es bastante sencillo, descargamos el script, lo alojamos en un servidor e insertamos el código en el encabezado de la plantilla, antes de </head>:
<script type="text/javascript" src="URL_jquery.idTabs.pack.js></script>
<ul class="idTabs"> <li><a href="#solapa_1">ENLACE</a></li> <li><a href="#solapa_2">ENLACE</a></li> </ul> <div id="solapa_1">el contenido de la primera solapa</div> <div id="solapa_2">el contenido de la segunda solapa</div>
<script type="text/javascript" src="URL_control.tabs.2.1.1.js></script>
<script type="text/javascript" src="URL_prototype.js"></script> <script type="text/javascript" src="URL_control.tabs.2.1.1.js"></script>
<ul id="nombre"> <li><a href="#solapa_1">ENLACE</a></li> <li><a href="#solapa_2">ENLACE</a></li> </ul> <div id="solapa_1">el contenido de la primera solapa</div> <div id="solapa_2">el contenido de la segunda solapa</div> <script> new Control.Tabs('nombre'); </script>
Si ya usamos Prototype, sólo necesitamos fabtabulous.js. Lo alojamos en un servidor y lo agregamos, como siempre, en algún lugar antes de </head> o, eventualmente, al final de la plantilla, justo antes de </body>:
<script type="text/javascript" src="URL_fabtabulous.js></script>
<ul id="tabs"> <li><a href="#solapa_1" class="active-tab">ENLACE 1</a></li> <li><a href="#solapa_2">ENLACE 2</a></li> <li><a href="#solapa_3">ENLACE 3</a></li> <li><a href="#solapa_4">ENLACE 4</a></li> </ul>
<div class="demoTabs"> <div id="solapa_1" class="demoSolapa active-tab-body">el contenido</div> <div id="solapa_2" class="demoSolapa">el contenido</div> <div id="solapa_3" class="demoSolapa">el contenido</div> <div id="solapa_4" class="demoSolapa">el contenido</div> </div>
Este es el esquema general del ejemplo:
<style type="text/css"> #tabs { /* quitamos las propiedades por defecto de las listas */ height: 32px; list-style-image: none; list-style-position: outside; list-style-type: none; } #tabs li { /* mostramos los items uno al lado del otro */ float: left; } #tabs a { /* diseño gráfico de los enlaces */ background-color: #101921; border:1px solid #FAEBD7; color: #777777; float: left; margin: 0 0 0 3px; padding: 5px 10px; text-decoration: none; } #tabs a.active-tab { /* un diseño diferenciado para la solapa activa */ background-color:#A52A2A; border:1px solid #FAEBD7; color:#FFFFFF; } .demoTabs { /* propiedades comunes al contenido de todas las solapas */ color: #F2F2F2; } .demoSolapa { /* por defecto, todo el contenido está oculto */ background-color: #362C18; clear: both; display: none; height:125px; padding: 10px; } .demoSolapa.active-tab-body { /* excepto la primera */ display: block; } </style>