Tema: capa con mostrar más
Ver Mensaje Individual
  #9 (permalink)  
Antiguo 06/02/2013, 10:42
Avatar de emprear
emprear
Colaborador
  
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 11 meses
Puntos: 1567
Respuesta: capa con mostrar más
Como te dije hay nuchas variantes, me olvidé del detalle de ocultar las restantes, se puede hacer asi (uso otra técnica comparando los indices de los elementos)

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>mostrar oculta capas</title> 
  6. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  7. <style type="text/css">
  8. /*<![CDATA[*/
  9. p{
  10. font-weight: bold;
  11. cursor: pointer;
  12. }
  13. #contenedor{
  14. width: 300px;
  15. }
  16. .faqs{
  17. /* display: none; */
  18.  text-overflow: ellipsis; 
  19.  overflow: hidden;
  20.  white-space: nowrap;
  21.  padding: 3px;
  22.  background: #DFD2C8;
  23.  margin:5px 1px 5px 1px;
  24.  border-top: dotted 1px darkred;
  25.  cursor: pointer;
  26. }
  27. .faqs span{
  28. display: block;
  29. cursor: pointer;
  30. font-size: 11px;
  31. margin-top: 10px;
  32. }
  33. #contenedor p{
  34. margin-bottom: 0;
  35. background: #DFD2C8;
  36. }
  37. /*]]>*/
  38. </style>
  39. <script type="text/javascript">
  40. //<![CDATA[
  41. function contenido(cual){
  42. var i;
  43. var principal = document.getElementById ("contenedor");
  44. var capas = [];
  45. var divTags = principal.getElementsByTagName ("div");
  46. for (var i = 0; i < divTags.length; i++) {
  47. capas.push(i);
  48. }
  49.     for(i in capas){
  50.         if(capas[i] == cual){
  51.         divTags[i].style.overflow = 'auto';
  52.         divTags[i].style.whiteSpace = 'normal';
  53.           divTags[i].title = '';   
  54.         }else{
  55.        divTags[i].style.overflow = 'hidden';
  56.         divTags[i].style.whiteSpace = 'nowrap';
  57.         divTags[i].title = 'Ver más detalles';        
  58.         }
  59.     }
  60. }
  61. //]]>
  62. </script>
  63. </head>
  64. <body>
  65. <div id="contenedor">
  66.  
  67. <div class="faqs" onclick="contenido(0)" title="Ver más detalles">Texto uno Lorem ipsum dolor sit  amet, consectetur adipiscing elit.  Aenean euismod vestibulum elit  non condimentum. Pellentesque vitae adipiscing sem</div>
  68.  
  69. <div class="faqs" onclick="contenido(1)" title="Ver más detalles">Texto dos Lorem ipsum dolor sit  amet, consectetur adipiscing elit.  Aenean euismod vestibulum elit  non condimentum. Pellentesque vitae adipiscing sem</div>
  70.  
  71. <div class="faqs" onclick="contenido(2)" title="Ver más detalles">Texto tres Lorem ipsum dolor sit  amet, consectetur adipiscing elit.  Aenean euismod vestibulum elit  non condimentum. Pellentesque vitae adipiscing sem</div>
  72. </div>
  73. </body>
  74. </html>
A esta le podría faltar, si se quiere, alguna forma de ocultar la que queda abierta, pero a eso no le dediqué tiempo todavía

Aqui hay 2 más por si estás aburrido
http://foros.emprear.com/javascript/...ctexto_nt.html
http://foros.emprear.com/javascript/...as-ctexto.html

Por compatibilidad no hay problema, las que te dejé antes, corren en todos los navegadores (ie a partir del 8), incluso en OperaMini y el Nokia Browser tembién (ajustes de los tamaños mediante)

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.