Ver Mensaje Individual
  #4 (permalink)  
Antiguo 28/10/2010, 07:09
Avatar de chichote
chichote
Colaborador
 
Fecha de Ingreso: diciembre-2004
Ubicación: Santiago - Chile
Mensajes: 1.868
Antigüedad: 19 años, 11 meses
Puntos: 145
Respuesta: ¿Como hacer algo como esto?

Si miras el codigo fuente esta todo lo que neceistas saber, es realmente muy sencillo

de todos modos lo expongo aca:

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  4. <title>JQuery Collapse</title>
  5. <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
  6. <script type="text/javascript">
  7. $(function()
  8. {
  9.  
  10. $("#mostrar").click(function(event) {
  11. event.preventDefault();
  12. $("#caja").slideToggle();
  13. });
  14.  
  15. $("#caja a").click(function(event) {
  16. event.preventDefault();
  17. $("#caja").slideUp();
  18. });
  19. });
  20. <style type="text/css">
  21. body {
  22.     font-family: Verdana, Arial, Helvetica, sans-serif;
  23.     font-size: 11px;
  24.     color: #666666;
  25. }
  26. a{color:#993300; text-decoration:none;}
  27. #caja {
  28. width:70%;
  29. display: none;
  30. padding:5px;
  31. border:2px solid #FADDA9;
  32. background-color:#FDF4E1;
  33. }
  34. #mostrar{
  35. display:block;
  36. width:70%;
  37. padding:5px;
  38. border:2px solid #D0E8F4;
  39. background-color:#ECF8FD;
  40. }
  41. </head>
  42. <a href="#" id="mostrar">MOSTRAR</a>
  43.  
  44. <div id="caja">
  45. <a href="#" class="close">[x]</a>
  46. <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p>
  47. </div>
  48. </body>
  49. </html>


saludos.
__________________
http://chicho.ninja yiaaaa