Tema: capa con mostrar más
Ver Mensaje Individual
  #7 (permalink)  
Antiguo 04/02/2013, 16:44
Avatar de emprear
emprear
Colaborador
  
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 17 años, 8 meses
Puntos: 1567
Respuesta: capa con mostrar más
Agrego una variante que no requiere id en las capas que contienen el texto

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>Ver ocultar detalles usando previousSibling</title> 
  6. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  7. <style type="text/css">
  8. /*<![CDATA[*/
  9. body{
  10.  font-family: arial, sans-serif;
  11.  font-size: 11pt;
  12. }
  13. /* propiedades por defecto para las capas que contienen el texto */
  14. .faqs {  
  15.  text-overflow: ellipsis;
  16.  overflow: hidden;
  17.  width: 500px;
  18.  white-space: nowrap;
  19.  padding: 3px;
  20.  background: #DFD2C8;
  21. }
  22.  
  23. .ver{
  24.  cursor: pointer;
  25.  font-size: 11px;
  26.  font-weight: bold;
  27.  margin-bottom: 10px;
  28.  padding: 3px;
  29. }
  30. /*]]>*/
  31. </style>
  32. <script type="text/javascript">
  33. //<![CDATA[
  34. function mostrarOcultar(e){
  35.  
  36. // identificamos el elemento previo al "mostrar detalles" que se clickea, que por supuesto será un div
  37. if(document.all && document.querySelector && !document.addEventListener){
  38. var p = e.previousSibling; // ie8
  39. }else{
  40. var p = e.previousSibling.previousSibling; // ie9, otros
  41. }
  42.  
  43. // tomamos una propiedad css del elemento obtenido previamente para evaluarla
  44. // en este caso el 'overflow', que por defecto nuestra class 'faqs' establece como hidden
  45. var miCapa=p.style.overflow;
  46.  
  47. // ahora, según sea el valor de overflow, invertimos el resto de las propiedades css y el texto a mostrar en el elemento (e) al que se hizo click
  48. if(miCapa=="auto"){
  49. p.style.overflow="hidden";
  50. p.style.whiteSpace = 'nowrap';
  51. e.innerHTML = 'ver detalles';
  52. }else{ 
  53. p.style.overflow="auto";
  54. p.style.whiteSpace = 'normal';
  55. e.innerHTML = 'ocultar detalles';
  56. }
  57. }
  58. //]]>
  59. </script>
  60. </head>
  61. <body>
  62. <div class="faqs">
  63. Lorem ipsum dolor sit  amet, consectetur adipiscing elit.  Aenean euismod vestibulum elit  non condimentum. Pellentesque
  64. vitae adipiscing sem. Phasellus velit enim, consequat id pharetra id, adipiscing in turpis 
  65. </div>
  66. <div onclick="mostrarOcultar(this)" class="ver">ver detalles</div>
  67. <div class="faqs">
  68. Vestibulum lacus diam, pellentesque in faucibus eget, dapibus sed sem. Integer id justo id tortor varius tempus. Aliquam
  69. dui tellus, consequat sed molestie in, facilisis eget nisi. 
  70. </div>
  71. <div onclick="mostrarOcultar(this)" class="ver">ver detalles</div>
  72. </body>
  73. </html>

Demo
http://foros.emprear.com/javascript/...ssibling.phtml

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