Efecto Acordeon

w0rldart · #1 (**permalink**) 10/05/2010, 03:07

Que tengo que añadir, para que el efecto toogle que tengo aqui se convierta a un efecto de acordeón?

El código javascript que me da el efecto toogle es este:

Código:

$(document).ready(function(){
	
	$(".toggle_container").hide();

	$("h2.trigger").toggle(function(){
		$(this).addClass("active"); 
		}, function () {
		$(this).removeClass("active");
	});
	
	$("h2.trigger").click(function(){
		$(this).next(".toggle_container").slideToggle("slow,");
	});

});

Que le puedo hacer para que sea en plan acordeón?

Dany_s · #2 (**permalink**) 10/05/2010, 05:51

y solo ocultar el que estaba activo, algo como:

Código HTML:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Prueba</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(function(){
	$("div").hide();
    $("h2:not(.active)").live('click', function (){
        $('.active').removeClass('active').next().slideUp();
        $(this).addClass("active").next().slideDown();
    });
});
</script>
</head>
<body>
    <h2>Uno</h2>
    <div>
        contenido uno
    </div>
    <h2>Dos</h2>
    <div>
        contenido dos
    </div>
    <h2>Tres</h2>
    <div>
        contenido tres
    </div>
</body>
</html>

w0rldart · #3 (**permalink**) 10/05/2010, 06:31

Hmm, intente añadir funciones en el código que yo tengo con lo que tu me distes, pero no me sale. Alguna otra solución?

Dany_s · #4 (**permalink**) 10/05/2010, 07:51

mmm no te entiendo, como que quieres que se adapte algo a lo que tienes sin sacar nada? porqué?

Solo tenés que asignar un click a los h2 identificando si no está activo

Código Javascript:

Ver original$("h2:not(.active)").live('click',

esconder si hay alguno abierto, y como no va a estar abirto ya no es activo

Código Javascript:

Ver original$('.active').removeClass('active').next().slideUp();

abrir el clickeado y ahora se convierte en activo

Código Javascript:

Ver original$(this).addClass("active").next().slideDown();

lo único raro ahí es agregar y eliminar la clase 'active' para saber que está abierto

yo ahi uso evento click pero si vos querés adaptarlo a un toogle tenés que seguirle los pasos para ver que hacer, lo mismo el slideToggle.

w0rldart · #5 (**permalink**) 15/05/2010, 04:15

Editado: tengo una solucion, a ver si funciona y os lo digo