Acordeon con javascript y Mootools

Podés ver la explicación completa sobre Mootools Accordion, donde también podrás encontrar mas información, ejemplos y tutoriales sobre Mootools en Castellano como asi también sobre algunos otros temas.

Suscribite a mi blog para recibir articulos directamente en tu lector de Feeds favorito.

Ejemplo basico

  1. $('link1').addEvent('click', function(ev)
  2. {
  3. 	new Event(ev).stop();
  4. 	$('uno').setStyle('display', 'block');
  5. 	var uno = new Accordion('#uno h2.titulo', '#uno div.contenido');
  6. });
Probar

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur lobortis, nisi at tincidunt suscipit, metus eros imperdiet risus, vitae vestibulum mauris urna ut est. Duis vitae arcu. Pellentesque facilisis dictum nunc. Donec non lacus. Cras porttitor nibh vel lacus. Proin id neque. Duis accumsan gravida odio. Donec nisi felis, porta non, venenatis eget, tempus eget, neque. Duis eu felis ac dolor vehicula posuere. Donec volutpat, massa sit amet varius egestas, orci metus fringilla diam, vitae tempus dolor libero nec leo. Duis vehicula lectus ac metus. Sed porta, lectus at ornare sollicitudin, nisl risus viverra magna, in varius nibh tortor a orci. Nam vel nibh adipiscing augue ultricies laoreet. Vivamus id magna. Suspendisse potenti.

Suspendisse orci risus

Suspendisse orci risus, feugiat venenatis, porta porta, congue id, tortor. Duis quis dolor. Duis pede purus, sagittis ut, molestie eget, pellentesque a, dolor. Etiam euismod enim at nunc. Morbi sit amet risus. Vestibulum est magna, sodales ultrices, lacinia at, mollis ac, metus. Curabitur at nulla. Pellentesque in arcu. Vivamus vel ante. Mauris pellentesque elit sit amet mi. Aenean sed ante in nisl gravida ullamcorper. Nullam dapibus est a magna. Nulla quam nibh, ullamcorper sit amet, feugiat imperdiet, bibendum vel, est. Maecenas consequat bibendum ligula. Sed eleifend nulla eget turpis. In congue ipsum id mi. Cras ipsum orci, pellentesque non, varius ac, rhoncus ut, sapien. Proin rhoncus feugiat sem. In quis odio. Integer eget arcu at odio suscipit ultricies.

Phasellus id metus ac mauris egestas tincidunt

Phasellus id metus ac mauris egestas tincidunt. Curabitur vulputate orci nec nunc. Vestibulum aliquam pulvinar erat. Donec nec diam. Integer faucibus hendrerit metus. Nam lobortis tortor. Integer mauris diam, blandit non, bibendum et, congue nec, risus. Fusce hendrerit ornare leo. Cras tempus. In velit massa, consequat ut, tristique ac, consequat in, est. Phasellus arcu dui, tincidunt ac, venenatis non, interdum et, arcu.

show: Se puede elegir el elemento que comienza abierto

  1. $('link2').addEvent('click', function(ev)
  2. {
  3. 	new Event(ev).stop();
  4. 	$('dos').setStyle('display', 'block');
  5. 	var dos = new Accordion('#dos h2.titulo', '#dos div.contenido',
  6. 	{
  7. 		show: 2
  8. 	});
  9. });
Probar

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur lobortis, nisi at tincidunt suscipit, metus eros imperdiet risus, vitae vestibulum mauris urna ut est. Duis vitae arcu. Pellentesque facilisis dictum nunc. Donec non lacus. Cras porttitor nibh vel lacus. Proin id neque. Duis accumsan gravida odio. Donec nisi felis, porta non, venenatis eget, tempus eget, neque. Duis eu felis ac dolor vehicula posuere. Donec volutpat, massa sit amet varius egestas, orci metus fringilla diam, vitae tempus dolor libero nec leo. Duis vehicula lectus ac metus. Sed porta, lectus at ornare sollicitudin, nisl risus viverra magna, in varius nibh tortor a orci. Nam vel nibh adipiscing augue ultricies laoreet. Vivamus id magna. Suspendisse potenti.

Suspendisse orci risus

Suspendisse orci risus, feugiat venenatis, porta porta, congue id, tortor. Duis quis dolor. Duis pede purus, sagittis ut, molestie eget, pellentesque a, dolor. Etiam euismod enim at nunc. Morbi sit amet risus. Vestibulum est magna, sodales ultrices, lacinia at, mollis ac, metus. Curabitur at nulla. Pellentesque in arcu. Vivamus vel ante. Mauris pellentesque elit sit amet mi. Aenean sed ante in nisl gravida ullamcorper. Nullam dapibus est a magna. Nulla quam nibh, ullamcorper sit amet, feugiat imperdiet, bibendum vel, est. Maecenas consequat bibendum ligula. Sed eleifend nulla eget turpis. In congue ipsum id mi. Cras ipsum orci, pellentesque non, varius ac, rhoncus ut, sapien. Proin rhoncus feugiat sem. In quis odio. Integer eget arcu at odio suscipit ultricies.

Phasellus id metus ac mauris egestas tincidunt

Phasellus id metus ac mauris egestas tincidunt. Curabitur vulputate orci nec nunc. Vestibulum aliquam pulvinar erat. Donec nec diam. Integer faucibus hendrerit metus. Nam lobortis tortor. Integer mauris diam, blandit non, bibendum et, congue nec, risus. Fusce hendrerit ornare leo. Cras tempus. In velit massa, consequat ut, tristique ac, consequat in, est. Phasellus arcu dui, tincidunt ac, venenatis non, interdum et, arcu.

display: Se puede elegir el elemento que se debe abrir(con transicion) al comienzo

  1. $('link3').addEvent('click', function(ev)
  2. {
  3. 	new Event(ev).stop();
  4. 	$('tres').setStyle('display', 'block');
  5. 	var tres = new Accordion('#tres h2.titulo', '#tres div.contenido',
  6. 	{
  7. 		display: 2
  8. 	});
  9. });
Probar

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur lobortis, nisi at tincidunt suscipit, metus eros imperdiet risus, vitae vestibulum mauris urna ut est. Duis vitae arcu. Pellentesque facilisis dictum nunc. Donec non lacus. Cras porttitor nibh vel lacus. Proin id neque. Duis accumsan gravida odio. Donec nisi felis, porta non, venenatis eget, tempus eget, neque. Duis eu felis ac dolor vehicula posuere. Donec volutpat, massa sit amet varius egestas, orci metus fringilla diam, vitae tempus dolor libero nec leo. Duis vehicula lectus ac metus. Sed porta, lectus at ornare sollicitudin, nisl risus viverra magna, in varius nibh tortor a orci. Nam vel nibh adipiscing augue ultricies laoreet. Vivamus id magna. Suspendisse potenti.

Suspendisse orci risus

Suspendisse orci risus, feugiat venenatis, porta porta, congue id, tortor. Duis quis dolor. Duis pede purus, sagittis ut, molestie eget, pellentesque a, dolor. Etiam euismod enim at nunc. Morbi sit amet risus. Vestibulum est magna, sodales ultrices, lacinia at, mollis ac, metus. Curabitur at nulla. Pellentesque in arcu. Vivamus vel ante. Mauris pellentesque elit sit amet mi. Aenean sed ante in nisl gravida ullamcorper. Nullam dapibus est a magna. Nulla quam nibh, ullamcorper sit amet, feugiat imperdiet, bibendum vel, est. Maecenas consequat bibendum ligula. Sed eleifend nulla eget turpis. In congue ipsum id mi. Cras ipsum orci, pellentesque non, varius ac, rhoncus ut, sapien. Proin rhoncus feugiat sem. In quis odio. Integer eget arcu at odio suscipit ultricies.

Phasellus id metus ac mauris egestas tincidunt

Phasellus id metus ac mauris egestas tincidunt. Curabitur vulputate orci nec nunc. Vestibulum aliquam pulvinar erat. Donec nec diam. Integer faucibus hendrerit metus. Nam lobortis tortor. Integer mauris diam, blandit non, bibendum et, congue nec, risus. Fusce hendrerit ornare leo. Cras tempus. In velit massa, consequat ut, tristique ac, consequat in, est. Phasellus arcu dui, tincidunt ac, venenatis non, interdum et, arcu.

fixedHeight: Alto fijo

  1. $('link4').addEvent('click', function(ev)
  2. {
  3. 	new Event(ev).stop();
  4. 	$('cuatro').setStyle('display', 'block');
  5. 	var cuatro = new Accordion('#cuatro h2.titulo', '#cuatro div.contenido',
  6. 	{
  7. 		fixedHeight: 100
  8. 	});
  9. });
Probar

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur lobortis, nisi at tincidunt suscipit, metus eros imperdiet risus, vitae vestibulum mauris urna ut est. Duis vitae arcu. Pellentesque facilisis dictum nunc. Donec non lacus. Cras porttitor nibh vel lacus. Proin id neque. Duis accumsan gravida odio. Donec nisi felis, porta non, venenatis eget, tempus eget, neque. Duis eu felis ac dolor vehicula posuere. Donec volutpat, massa sit amet varius egestas, orci metus fringilla diam, vitae tempus dolor libero nec leo. Duis vehicula lectus ac metus. Sed porta, lectus at ornare sollicitudin, nisl risus viverra magna, in varius nibh tortor a orci. Nam vel nibh adipiscing augue ultricies laoreet. Vivamus id magna. Suspendisse potenti.

Suspendisse orci risus

Suspendisse orci risus, feugiat venenatis, porta porta, congue id, tortor. Duis quis dolor. Duis pede purus, sagittis ut, molestie eget, pellentesque a, dolor. Etiam euismod enim at nunc. Morbi sit amet risus. Vestibulum est magna, sodales ultrices, lacinia at, mollis ac, metus. Curabitur at nulla. Pellentesque in arcu. Vivamus vel ante. Mauris pellentesque elit sit amet mi. Aenean sed ante in nisl gravida ullamcorper. Nullam dapibus est a magna. Nulla quam nibh, ullamcorper sit amet, feugiat imperdiet, bibendum vel, est. Maecenas consequat bibendum ligula. Sed eleifend nulla eget turpis. In congue ipsum id mi. Cras ipsum orci, pellentesque non, varius ac, rhoncus ut, sapien. Proin rhoncus feugiat sem. In quis odio. Integer eget arcu at odio suscipit ultricies.

Phasellus id metus ac mauris egestas tincidunt

Phasellus id metus ac mauris egestas tincidunt. Curabitur vulputate orci nec nunc. Vestibulum aliquam pulvinar erat. Donec nec diam. Integer faucibus hendrerit metus. Nam lobortis tortor. Integer mauris diam, blandit non, bibendum et, congue nec, risus. Fusce hendrerit ornare leo. Cras tempus. In velit massa, consequat ut, tristique ac, consequat in, est. Phasellus arcu dui, tincidunt ac, venenatis non, interdum et, arcu.

height: Se puede quitar la transicion principal(apertura y cierre)

  1. $('link5').addEvent('click', function(ev)
  2. {
  3. 	new Event(ev).stop();
  4. 	$('cinco').setStyle('display', 'block');
  5. 	var cinco = new Accordion('#cinco h2.titulo', '#cinco div.contenido',
  6. 	{
  7. 		height: false
  8. 	});
  9. });
Probar

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur lobortis, nisi at tincidunt suscipit, metus eros imperdiet risus, vitae vestibulum mauris urna ut est. Duis vitae arcu. Pellentesque facilisis dictum nunc. Donec non lacus. Cras porttitor nibh vel lacus. Proin id neque. Duis accumsan gravida odio. Donec nisi felis, porta non, venenatis eget, tempus eget, neque. Duis eu felis ac dolor vehicula posuere. Donec volutpat, massa sit amet varius egestas, orci metus fringilla diam, vitae tempus dolor libero nec leo. Duis vehicula lectus ac metus. Sed porta, lectus at ornare sollicitudin, nisl risus viverra magna, in varius nibh tortor a orci. Nam vel nibh adipiscing augue ultricies laoreet. Vivamus id magna. Suspendisse potenti.

Suspendisse orci risus

Suspendisse orci risus, feugiat venenatis, porta porta, congue id, tortor. Duis quis dolor. Duis pede purus, sagittis ut, molestie eget, pellentesque a, dolor. Etiam euismod enim at nunc. Morbi sit amet risus. Vestibulum est magna, sodales ultrices, lacinia at, mollis ac, metus. Curabitur at nulla. Pellentesque in arcu. Vivamus vel ante. Mauris pellentesque elit sit amet mi. Aenean sed ante in nisl gravida ullamcorper. Nullam dapibus est a magna. Nulla quam nibh, ullamcorper sit amet, feugiat imperdiet, bibendum vel, est. Maecenas consequat bibendum ligula. Sed eleifend nulla eget turpis. In congue ipsum id mi. Cras ipsum orci, pellentesque non, varius ac, rhoncus ut, sapien. Proin rhoncus feugiat sem. In quis odio. Integer eget arcu at odio suscipit ultricies.

Phasellus id metus ac mauris egestas tincidunt

Phasellus id metus ac mauris egestas tincidunt. Curabitur vulputate orci nec nunc. Vestibulum aliquam pulvinar erat. Donec nec diam. Integer faucibus hendrerit metus. Nam lobortis tortor. Integer mauris diam, blandit non, bibendum et, congue nec, risus. Fusce hendrerit ornare leo. Cras tempus. In velit massa, consequat ut, tristique ac, consequat in, est. Phasellus arcu dui, tincidunt ac, venenatis non, interdum et, arcu.

opacity: Se puede quitar el efecto de opacidad

  1. $('link6').addEvent('click', function(ev)
  2. {
  3. 	new Event(ev).stop();
  4. 	$('seis').setStyle('display', 'block');
  5. 	var seis = new Accordion('#seis h2.titulo', '#seis div.contenido',
  6. 	{
  7. 		opacity: false
  8. 	});
  9. });
Probar

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur lobortis, nisi at tincidunt suscipit, metus eros imperdiet risus, vitae vestibulum mauris urna ut est. Duis vitae arcu. Pellentesque facilisis dictum nunc. Donec non lacus. Cras porttitor nibh vel lacus. Proin id neque. Duis accumsan gravida odio. Donec nisi felis, porta non, venenatis eget, tempus eget, neque. Duis eu felis ac dolor vehicula posuere. Donec volutpat, massa sit amet varius egestas, orci metus fringilla diam, vitae tempus dolor libero nec leo. Duis vehicula lectus ac metus. Sed porta, lectus at ornare sollicitudin, nisl risus viverra magna, in varius nibh tortor a orci. Nam vel nibh adipiscing augue ultricies laoreet. Vivamus id magna. Suspendisse potenti.

Suspendisse orci risus

Suspendisse orci risus, feugiat venenatis, porta porta, congue id, tortor. Duis quis dolor. Duis pede purus, sagittis ut, molestie eget, pellentesque a, dolor. Etiam euismod enim at nunc. Morbi sit amet risus. Vestibulum est magna, sodales ultrices, lacinia at, mollis ac, metus. Curabitur at nulla. Pellentesque in arcu. Vivamus vel ante. Mauris pellentesque elit sit amet mi. Aenean sed ante in nisl gravida ullamcorper. Nullam dapibus est a magna. Nulla quam nibh, ullamcorper sit amet, feugiat imperdiet, bibendum vel, est. Maecenas consequat bibendum ligula. Sed eleifend nulla eget turpis. In congue ipsum id mi. Cras ipsum orci, pellentesque non, varius ac, rhoncus ut, sapien. Proin rhoncus feugiat sem. In quis odio. Integer eget arcu at odio suscipit ultricies.

Phasellus id metus ac mauris egestas tincidunt

Phasellus id metus ac mauris egestas tincidunt. Curabitur vulputate orci nec nunc. Vestibulum aliquam pulvinar erat. Donec nec diam. Integer faucibus hendrerit metus. Nam lobortis tortor. Integer mauris diam, blandit non, bibendum et, congue nec, risus. Fusce hendrerit ornare leo. Cras tempus. In velit massa, consequat ut, tristique ac, consequat in, est. Phasellus arcu dui, tincidunt ac, venenatis non, interdum et, arcu.

alwaysHide: Los elementos que se abren, tambien se pueden cerrar

  1. $('link7').addEvent('click', function(ev)
  2. {
  3. 	new Event(ev).stop();
  4. 	$('siete').setStyle('display', 'block');
  5. 	var siete = new Accordion('#siete h2.titulo', '#siete div.contenido',
  6. 	{
  7. 		alwaysHide: true
  8. 	});
  9. });
Probar

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur lobortis, nisi at tincidunt suscipit, metus eros imperdiet risus, vitae vestibulum mauris urna ut est. Duis vitae arcu. Pellentesque facilisis dictum nunc. Donec non lacus. Cras porttitor nibh vel lacus. Proin id neque. Duis accumsan gravida odio. Donec nisi felis, porta non, venenatis eget, tempus eget, neque. Duis eu felis ac dolor vehicula posuere. Donec volutpat, massa sit amet varius egestas, orci metus fringilla diam, vitae tempus dolor libero nec leo. Duis vehicula lectus ac metus. Sed porta, lectus at ornare sollicitudin, nisl risus viverra magna, in varius nibh tortor a orci. Nam vel nibh adipiscing augue ultricies laoreet. Vivamus id magna. Suspendisse potenti.

Suspendisse orci risus

Suspendisse orci risus, feugiat venenatis, porta porta, congue id, tortor. Duis quis dolor. Duis pede purus, sagittis ut, molestie eget, pellentesque a, dolor. Etiam euismod enim at nunc. Morbi sit amet risus. Vestibulum est magna, sodales ultrices, lacinia at, mollis ac, metus. Curabitur at nulla. Pellentesque in arcu. Vivamus vel ante. Mauris pellentesque elit sit amet mi. Aenean sed ante in nisl gravida ullamcorper. Nullam dapibus est a magna. Nulla quam nibh, ullamcorper sit amet, feugiat imperdiet, bibendum vel, est. Maecenas consequat bibendum ligula. Sed eleifend nulla eget turpis. In congue ipsum id mi. Cras ipsum orci, pellentesque non, varius ac, rhoncus ut, sapien. Proin rhoncus feugiat sem. In quis odio. Integer eget arcu at odio suscipit ultricies.

Phasellus id metus ac mauris egestas tincidunt

Phasellus id metus ac mauris egestas tincidunt. Curabitur vulputate orci nec nunc. Vestibulum aliquam pulvinar erat. Donec nec diam. Integer faucibus hendrerit metus. Nam lobortis tortor. Integer mauris diam, blandit non, bibendum et, congue nec, risus. Fusce hendrerit ornare leo. Cras tempus. In velit massa, consequat ut, tristique ac, consequat in, est. Phasellus arcu dui, tincidunt ac, venenatis non, interdum et, arcu.

Acordeon Horizontal

  1. var ocho = new Accordion('#ocho h2.titulo', '#ocho div.contenido',
  2. {
  3. 	width: true,
  4. 	fixedWidth: 300,
  5. 	fixedHeight: 300
  6. });

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur lobortis, nisi at tincidunt suscipit, metus eros imperdiet risus, vitae vestibulum mauris urna ut est. Duis vitae arcu. Pellentesque facilisis dictum nunc. Donec non lacus. Cras porttitor nibh vel lacus. Proin id neque. Duis accumsan gravida odio. Donec nisi felis, porta non, venenatis eget, tempus eget, neque. Duis eu felis ac dolor vehicula posuere. Donec volutpat, massa sit amet varius egestas, orci metus fringilla diam, vitae tempus dolor libero nec leo. Duis vehicula lectus ac metus. Sed porta, lectus at ornare sollicitudin, nisl risus viverra magna, in varius nibh tortor a orci. Nam vel nibh adipiscing augue ultricies laoreet. Vivamus id magna. Suspendisse potenti.

Suspendisse orci risus, feugiat venenatis, porta porta, congue id, tortor. Duis quis dolor. Duis pede purus, sagittis ut, molestie eget, pellentesque a, dolor. Etiam euismod enim at nunc. Morbi sit amet risus. Vestibulum est magna, sodales ultrices, lacinia at, mollis ac, metus. Curabitur at nulla. Pellentesque in arcu. Vivamus vel ante. Mauris pellentesque elit sit amet mi. Aenean sed ante in nisl gravida ullamcorper. Nullam dapibus est a magna. Nulla quam nibh, ullamcorper sit amet, feugiat imperdiet, bibendum vel, est. Maecenas consequat bibendum ligula. Sed eleifend nulla eget turpis. In congue ipsum id mi. Cras ipsum orci, pellentesque non, varius ac, rhoncus ut, sapien. Proin rhoncus feugiat sem. In quis odio. Integer eget arcu at odio suscipit ultricies.

Phasellus id metus ac mauris egestas tincidunt. Curabitur vulputate orci nec nunc. Vestibulum aliquam pulvinar erat. Donec nec diam. Integer faucibus hendrerit metus. Nam lobortis tortor. Integer mauris diam, blandit non, bibendum et, congue nec, risus. Fusce hendrerit ornare leo. Cras tempus. In velit massa, consequat ut, tristique ac, consequat in, est. Phasellus arcu dui, tincidunt ac, venenatis non, interdum et, arcu.

Eventos: onActive y onBackground

  1. $('link9').addEvent('click', function(ev)
  2. {
  3. 	new Event(ev).stop();
  4. 	$('nueve').setStyle('display', 'block');
  5. 	var nueve = new Accordion('#nueve h2.titulo', '#nueve div.contenido',
  6. 	{
  7. 		onActive: function(lnk, elemento)
  8. 		{
  9. 			lnk.addClass('seleccionado');
  10. 		},
  11. 		onBackground: function(lnk, elemento)
  12. 		{
  13. 			lnk.removeClass('seleccionado');
  14. 		}
  15. 	});
  16. });
Probar

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur lobortis, nisi at tincidunt suscipit, metus eros imperdiet risus, vitae vestibulum mauris urna ut est. Duis vitae arcu. Pellentesque facilisis dictum nunc. Donec non lacus. Cras porttitor nibh vel lacus. Proin id neque. Duis accumsan gravida odio. Donec nisi felis, porta non, venenatis eget, tempus eget, neque. Duis eu felis ac dolor vehicula posuere. Donec volutpat, massa sit amet varius egestas, orci metus fringilla diam, vitae tempus dolor libero nec leo. Duis vehicula lectus ac metus. Sed porta, lectus at ornare sollicitudin, nisl risus viverra magna, in varius nibh tortor a orci. Nam vel nibh adipiscing augue ultricies laoreet. Vivamus id magna. Suspendisse potenti.

Suspendisse orci risus

Suspendisse orci risus, feugiat venenatis, porta porta, congue id, tortor. Duis quis dolor. Duis pede purus, sagittis ut, molestie eget, pellentesque a, dolor. Etiam euismod enim at nunc. Morbi sit amet risus. Vestibulum est magna, sodales ultrices, lacinia at, mollis ac, metus. Curabitur at nulla. Pellentesque in arcu. Vivamus vel ante. Mauris pellentesque elit sit amet mi. Aenean sed ante in nisl gravida ullamcorper. Nullam dapibus est a magna. Nulla quam nibh, ullamcorper sit amet, feugiat imperdiet, bibendum vel, est. Maecenas consequat bibendum ligula. Sed eleifend nulla eget turpis. In congue ipsum id mi. Cras ipsum orci, pellentesque non, varius ac, rhoncus ut, sapien. Proin rhoncus feugiat sem. In quis odio. Integer eget arcu at odio suscipit ultricies.

Phasellus id metus ac mauris egestas tincidunt

Phasellus id metus ac mauris egestas tincidunt. Curabitur vulputate orci nec nunc. Vestibulum aliquam pulvinar erat. Donec nec diam. Integer faucibus hendrerit metus. Nam lobortis tortor. Integer mauris diam, blandit non, bibendum et, congue nec, risus. Fusce hendrerit ornare leo. Cras tempus. In velit massa, consequat ut, tristique ac, consequat in, est. Phasellus arcu dui, tincidunt ac, venenatis non, interdum et, arcu.

addSection: Agregando secciones

  1. $('link10').addEvent('click', function(ev)
  2. {
  3. 	new Event(ev).stop();
  4. 	$('diez').setStyle('display', 'block');
  5. 	var diez = new Accordion('#diez h2.titulo', '#diez div.contenido');
  6. 	
  7. 	var nuevoLnk = new Element('h3').appendText('Nuevo elemento').addClass('titulo');
  8. 	var nuevoEl = new Element('div').appendText('Este es el contenido del nuevo elemento');
  9. 	diez.addSection(nuevoLnk, nuevoEl, 1);
  10. });
Probar

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur lobortis, nisi at tincidunt suscipit, metus eros imperdiet risus, vitae vestibulum mauris urna ut est. Duis vitae arcu. Pellentesque facilisis dictum nunc. Donec non lacus. Cras porttitor nibh vel lacus. Proin id neque. Duis accumsan gravida odio. Donec nisi felis, porta non, venenatis eget, tempus eget, neque. Duis eu felis ac dolor vehicula posuere. Donec volutpat, massa sit amet varius egestas, orci metus fringilla diam, vitae tempus dolor libero nec leo. Duis vehicula lectus ac metus. Sed porta, lectus at ornare sollicitudin, nisl risus viverra magna, in varius nibh tortor a orci. Nam vel nibh adipiscing augue ultricies laoreet. Vivamus id magna. Suspendisse potenti.

Suspendisse orci risus

Suspendisse orci risus, feugiat venenatis, porta porta, congue id, tortor. Duis quis dolor. Duis pede purus, sagittis ut, molestie eget, pellentesque a, dolor. Etiam euismod enim at nunc. Morbi sit amet risus. Vestibulum est magna, sodales ultrices, lacinia at, mollis ac, metus. Curabitur at nulla. Pellentesque in arcu. Vivamus vel ante. Mauris pellentesque elit sit amet mi. Aenean sed ante in nisl gravida ullamcorper. Nullam dapibus est a magna. Nulla quam nibh, ullamcorper sit amet, feugiat imperdiet, bibendum vel, est. Maecenas consequat bibendum ligula. Sed eleifend nulla eget turpis. In congue ipsum id mi. Cras ipsum orci, pellentesque non, varius ac, rhoncus ut, sapien. Proin rhoncus feugiat sem. In quis odio. Integer eget arcu at odio suscipit ultricies.

Phasellus id metus ac mauris egestas tincidunt

Phasellus id metus ac mauris egestas tincidunt. Curabitur vulputate orci nec nunc. Vestibulum aliquam pulvinar erat. Donec nec diam. Integer faucibus hendrerit metus. Nam lobortis tortor. Integer mauris diam, blandit non, bibendum et, congue nec, risus. Fusce hendrerit ornare leo. Cras tempus. In velit massa, consequat ut, tristique ac, consequat in, est. Phasellus arcu dui, tincidunt ac, venenatis non, interdum et, arcu.

display

  1. $('once').setStyle('display', 'block');
  2. var once = new Accordion('#once h2.titulo', '#once div.contenido');
  3. $('link11').addEvent('click', function(ev)
  4. {
  5. 	new Event(ev).stop();
  6. 	once.display(1);
  7. });
  8.
Probar

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur lobortis, nisi at tincidunt suscipit, metus eros imperdiet risus, vitae vestibulum mauris urna ut est. Duis vitae arcu. Pellentesque facilisis dictum nunc. Donec non lacus. Cras porttitor nibh vel lacus. Proin id neque. Duis accumsan gravida odio. Donec nisi felis, porta non, venenatis eget, tempus eget, neque. Duis eu felis ac dolor vehicula posuere. Donec volutpat, massa sit amet varius egestas, orci metus fringilla diam, vitae tempus dolor libero nec leo. Duis vehicula lectus ac metus. Sed porta, lectus at ornare sollicitudin, nisl risus viverra magna, in varius nibh tortor a orci. Nam vel nibh adipiscing augue ultricies laoreet. Vivamus id magna. Suspendisse potenti.

Suspendisse orci risus

Suspendisse orci risus, feugiat venenatis, porta porta, congue id, tortor. Duis quis dolor. Duis pede purus, sagittis ut, molestie eget, pellentesque a, dolor. Etiam euismod enim at nunc. Morbi sit amet risus. Vestibulum est magna, sodales ultrices, lacinia at, mollis ac, metus. Curabitur at nulla. Pellentesque in arcu. Vivamus vel ante. Mauris pellentesque elit sit amet mi. Aenean sed ante in nisl gravida ullamcorper. Nullam dapibus est a magna. Nulla quam nibh, ullamcorper sit amet, feugiat imperdiet, bibendum vel, est. Maecenas consequat bibendum ligula. Sed eleifend nulla eget turpis. In congue ipsum id mi. Cras ipsum orci, pellentesque non, varius ac, rhoncus ut, sapien. Proin rhoncus feugiat sem. In quis odio. Integer eget arcu at odio suscipit ultricies.

Phasellus id metus ac mauris egestas tincidunt

Phasellus id metus ac mauris egestas tincidunt. Curabitur vulputate orci nec nunc. Vestibulum aliquam pulvinar erat. Donec nec diam. Integer faucibus hendrerit metus. Nam lobortis tortor. Integer mauris diam, blandit non, bibendum et, congue nec, risus. Fusce hendrerit ornare leo. Cras tempus. In velit massa, consequat ut, tristique ac, consequat in, est. Phasellus arcu dui, tincidunt ac, venenatis non, interdum et, arcu.