Ver Mensaje Individual
  #2 (permalink)  
Antiguo 05/11/2012, 13:43
3nr1c
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Expandir / Contraer Texto

No es muy difícil:

Código CSS:
Ver original
  1. #el1, #el2, #el3 {
  2. display:none;
  3. }

Código HTML:
Ver original
  1. <a href="#" id="toggleall">Abrir todos</a>
  2. <br/>
  3. <a href="#" id="toggle1">Titulo1</a>
  4. <div id="el1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sed nulla sed lorem euismod tempus. In hac habitasse platea dictumst. </div>
  5. <br/>
  6. <a href="#" id="toggle2">Titulo2</a>
  7. <div id="el2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sed nulla sed lorem euismod tempus. In hac habitasse platea dictumst. </div>
  8. <br/>
  9. <a href="#" id="toggle3">Titulo3</a>
  10. <div id="el3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sed nulla sed lorem euismod tempus. In hac habitasse platea dictumst. </div>

Código Javascript:
Ver original
  1. function s(str){
  2.     return document.querySelector(str);
  3. }
  4.  
  5. function toggle(n){
  6.   var el = s('#el'+n);
  7.  
  8.   if( el.style.display == 'none' || el.style.display == '' ){
  9.     el.style.display = 'block';
  10.   }else{
  11.     el.style.display = 'none';
  12.   }
  13. }
  14.  
  15. s('#toggle1').onclick = function(){ toggle(1); }
  16. s('#toggle2').onclick = function(){ toggle(2); }
  17. s('#toggle3').onclick = function(){ toggle(3); }
  18. s('#toggleall').onclick = function(){
  19.   toggle(1);
  20.   toggle(2);
  21.   toggle(3);
  22. }

(me ha funcionado en Firefox)

Un saludo