Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

setfreak

jQuery Accordion Horizontal

Por , em Javascript

Recommended Posts

setfreak    0

setfreak
Postado

Então pessoal, eu peguei esse tutorial do sohtanaka: Simple Accordion w/ CSS and jQuery e fiz 2 modificações para ficar com o efeito horizontal. O meu problema é que eu queria usar o "slide" do jQuery UI e não consigo. :(

Aqui vão os scripts:

 

O script funciona quando esta assim: 

$(".box").hide();
$(".trigger:first").addClass("active").next().show();
$(".trigger").click(function () {
if( $(this).next().is(":hidden") ) { 
	$(".trigger").removeClass("active").next().hide("slow"); //.hide("slow"); era antes .slideUp();
	$(this).toggleClass("active").next().show("slow"); //.show("slow"); era antes .slideDown();
}	

return false;
});

 

Mas quando substituo isso

.hide("slow");
.show("slow");

Por isso respectivamente:

.hide( "slide", "slow" );
.effect( "slide", "slow" );

Fica tudo bagunçado.

 

Esse é meu HTML completo:

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.5.1.min.js"></script>
<script src="jquery-ui-1.8.13.custom.min.js"></script>>
<style type="text/css">
.trigger {float:left;width:30px;height:300px;background:green;}
.box {float:left;width:500px;height:300px;background:blue;}  
</style>
<script>
$(document).ready(function() {

$(".box").hide();
$(".trigger:first").addClass("active").next().show();
//On Click
$(".trigger").click(function () {
if( $(this).next().is(":hidden") ) {
	$(".trigger").removeClass("active").next().hide( "slide", "slow" ); //????
	$(this).toggleClass("active").next().effect( "slide", "slow" ); //????
}	

return false;
});

});
</script>
</head>
<body>
<div class="trigger"><a href="#">GATILHO 1</a></div>
<div style="display: none;" class="box">DUMB, DUMB, DUMB, DUMB DUMB, DUMB, DUMB, DUMB DUMB, DUMB, DUMB, DUMB.</div>
<div class="trigger"><a href="#">GATILHO 2</a></div>
<div style="display: none;" class="box">DUMB, DUMB, DUMB, DUMB DUMB, DUMB, DUMB, DUMB DUMB, DUMB, DUMB, DUMB.</div>
<div class="trigger"><a href="#">GATILHO 3</a></div>
<div style="display: none;" class="box">DUMB, DUMB, DUMB, DUMB DUMB, DUMB, DUMB, DUMB DUMB, DUMB, DUMB, DUMB.</div>
<div class="trigger"><a href="#">GATILHO 4</a></div>
<div style="display: none;" class="box">DUMB, DUMB, DUMB, DUMB DUMB, DUMB, DUMB, DUMB DUMB, DUMB, DUMB, DUMB.</div>
</body>
</html>

 

Espero que um de vocês possa me ajudar. :joia:

Compartilhar este post

Link para o post
Compartilhar em outros sites

Ted k'    126

Ted k'
Postado

O efeito .hide() só tem "fast" e "slow", veja a documentação http://api.jquery.com/hide/

 

Melhor usar animate, http://api.jquery.com/animate

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito