Expandir / Contraer Texto

[datcom]

Hola gente!
Quiero saber como hacer si hay algun codigo para armar una especie de menu que para cuando haga click en alguno de los titulos se desgloce abajo automaticamente un texto. Y que se pueda expandir todos a la vez a parte de individualelmente

Es posible?

for example:


{expandir todos}

{titulo 1}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sed nulla sed lorem euismod tempus. In hac habitasse platea dictumst.

{titulo 2}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sed nulla sed lorem euismod tempus. In hac habitasse platea dictumst.

{titulo 3}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sed nulla sed lorem euismod tempus. In hac habitasse platea dictumst.

gracias!

[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

[hackjose]

algo facil seria usar el elemento details, el titulo debe ir con summary

Código HTML:

<button onclick="desgloza()">Click</button>
 
<details id="uno">
<summary>Click me!</summary>
<p>anything</p>
</details>
 
<details id="dos">
<summary>Click me!</summary>
<p>anything</p>
</details>
 
<details id="tres">
<summary>Click me!</summary>
<p>anything</p>
</details>
    
​<script>
function desgloza()
    {
    var uno = document.getElementById("uno").open = true;
    var dos = document.getElementById("dos").open = true;
    var tre = document.getElementById("tres").open = true;
    }    
</script>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
 

Saludos

[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.

[datcom]

Iniciado por hackjose

algo facil seria usar el elemento details, el titulo debe ir con summary

Código HTML:

<button onclick="desgloza()">Click</button>
 
<details id="uno">
<summary>Click me!</summary>
<p>anything</p>
</details>
 
<details id="dos">
<summary>Click me!</summary>
<p>anything</p>
</details>
 
<details id="tres">
<summary>Click me!</summary>
<p>anything</p>
</details>
    
​<script>
function desgloza()
    {
    var uno = document.getElementById("uno").open = true;
    var dos = document.getElementById("dos").open = true;
    var tre = document.getElementById("tres").open = true;
    }    
</script>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
 

Saludos

Este me funciono barbaro pero tengo dos cuestiones haber si se pueden agregar.
En el desgloza todo me los abre todos pero no me los cierra todos cuando click denuevo.

Este por un lado y lo otro era agregar un efecto deslizante y no tan cortante es posible?

Gracias!

[chwc]

obviamente no te los cierra, ya que lo unico que hace esa función es abrirlos , vamos a mejorar el script

​var estado = false // estado : cerrado
function modificarDivs(elementos, estado) {
for (x in elementos)
document.getElementById(elementos[x]).open = estado
}

function desgloza() {
if (estado === false) {
modificarDivs(["uno", "dos", "tres"], true)
estado = true
} else {
modificarDivs(["uno", "dos", "tres"], false)
estado = false
}
}​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ ​​​​​​​​​​​​​​​​​​​​​

[datcom]

Funciona barbaro si, pero me acabod e dar cuenta que con details no em sirve nada.
como puedo reemplazar ese tag

[emprear]

Iniciado por hackjose

algo facil seria usar el elemento details, el titulo debe ir con summary

Código HTML:

<button onclick="desgloza()">Click</button>
 
<details id="uno">
<summary>Click me!</summary>
<p>anything</p>
</details>
 
<details id="dos">
<summary>Click me!</summary>
<p>anything</p>
</details>
 
<details id="tres">
<summary>Click me!</summary>
<p>anything</p>
</details>
    
​<script>
function desgloza()
    {
    var uno = document.getElementById("uno").open = true;
    var dos = document.getElementById("dos").open = true;
    var tre = document.getElementById("tres").open = true;
    }    
</script>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
 

Saludos

Pero eso solo te va a funcionar en Chrome, no me parece que sea una solución.

[hackjose]

Se que esta a medias porque no vuelve a contraer, pero esto lo hice intencionalmente para que datcom escriba dicho codigo.

emprear, no sabia que chrome era el unico que lo soporta, gracias por la info.

Saludos a todos