Expandir / Contraer Texto

[datcom]

Iniciado por 3nr1c

No es muy difícil:

Código CSS:

#el1, #el2, #el3 {
display:none;
}
 

Código HTML:

<a href="#" id="toggleall">Abrir todos</a>
<br/>
<a href="#" id="toggle1">Titulo1</a>
<div id="el1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sed nulla sed lorem euismod tempus. In hac habitasse platea dictumst. </div>
<br/>
<a href="#" id="toggle2">Titulo2</a>
<div id="el2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sed nulla sed lorem euismod tempus. In hac habitasse platea dictumst. </div>
<br/>
<a href="#" id="toggle3">Titulo3</a>
<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:

function s(str){
    return document.querySelector(str);
}
 
function toggle(n){
  var el = s('#el'+n);
 
  if( el.style.display == 'none' || el.style.display == '' ){
    el.style.display = 'block';
  }else{
    el.style.display = 'none';
  }
}
 
s('#toggle1').onclick = function(){ toggle(1); }
s('#toggle2').onclick = function(){ toggle(2); }
s('#toggle3').onclick = function(){ toggle(3); }
s('#toggleall').onclick = function(){
  toggle(1);
  toggle(2);
  toggle(3);
}
 

(me ha funcionado en Firefox)

Un saludo

Hola , lo he probado y no me funciona... no se abren al clickear.