Desde Intenta nos enseñan como expandir y colapsar un div de una forma realmente sencilla. Para ello utiliza jQuery y un poco de CSS, creando un script muy ligero, realmente vistoso y útil.
Puedes descargarte el script, ver la demostración o continuar leyendo el artículo dónde se explica su funcionamiento.
¿Cómo usarlo?
Lo primero que deberemos hacer es incluir la librería de jQuery y el script entre las etiquetas head de nuestra plantilla o página web, de la siguiente manera:
Código JavaScript
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(function() { $("#mostrar").click(function(event) { event.preventDefault(); $("#caja").slideToggle(); }); $("#caja a").click(function(event) { event.preventDefault(); $("#caja").slideUp(); }); }); </script>
A continuación le daremos un poco de estilo al div mediante CSS.
Código CSS
<style type="text/css"> body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #666666; } a{color:#993300; text-decoration:none;} #caja { width:70%; display: none; padding:5px; border:2px solid #FADDA9; background-color:#FDF4E1; } #mostrar{ display:block; width:70%; padding:5px; border:2px solid #D0E8F4; background-color:#ECF8FD; } </style>
Y ahora tan solo nos falta añadir el div entre las etiquetas de body y realizar la llamada mediante el atributo id=”mostrar”, de esta forma:
Código HTML
<a href="#" id="mostrar">MOSTRAR</a> <div id="caja"> <p>Lorem ipsum dolor sit amet,...</p> </div>
Hey buen aporte!, gracias por el dato! ahora vere como le doy un uso en mi blog!