Ver Mensaje Individual
  #5 (permalink)  
Antiguo 01/06/2010, 14:45
Avatar de neodani
neodani
 
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 17 años, 9 meses
Puntos: 20
Respuesta: Como conseguir este efecto

Lo conseguí!

Dejo el ejemplo
http://fdw.neodani.com/jquery/mostra...r/ejemplo1.php

Y aquí el código:

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 src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
  6. <script type="text/javascript">
  7. $(document).ready(function()
  8. {
  9.     $(".titulo a").click(function(event) {
  10.         event.preventDefault();
  11.         $(this).toggleClass('open').siblings().removeClass('open').end();
  12.         $("#caja").toggle();
  13.     });
  14.  
  15. });
  16. <style type="text/css">
  17. body {
  18.     font-family: Verdana, Arial, Helvetica, sans-serif;
  19.     font-size: 11px;
  20.     color: #666666;
  21. }
  22. #box{
  23.     width:400px;
  24. }
  25.  
  26. a{color:#000; text-decoration:none;}
  27. #caja {
  28.     display: none;
  29.     padding:5px;
  30.     border:2px solid #ccc;
  31.     background-color:#eee;
  32. }
  33.  
  34. .titulo {
  35.     background:url("inner.gif") repeat-x scroll center bottom #DDDCDD;
  36.     border:1px solid #DEDEDE;
  37.     color:#000000;
  38.     padding:8px;
  39.     font-weight:bold;
  40. }
  41. .titulo a.open{
  42.     background:url("inactivate.gif") no-repeat 0px -2px;
  43.     padding-left:25px;
  44.     height:20px;
  45.     outline:0;
  46. }
  47. .titulo a{
  48.     background:url("activate.gif") no-repeat 0px -2px;
  49.     outline:0;
  50.     padding-left:25px;
  51. }
  52. </head>
  53. <div id="box">
  54.     <div class="titulo"><a class="open" href="#"></a>Ticket Information</div>
  55.     <div id="caja">
  56.     <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>
  57.     </div>
  58. </div>
  59. </body>
  60. </html>

Saludos!