Ir para conteúdo

POWERED BY:

Arquivado

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

Giovani

[Resolvido] Accordion?

Por , em Javascript

Recommended Posts

Giovani    104

Giovani
Postado

Galera, preciso de um help e creio ser tranquilo.

Imagem Postada

 

Como podem perceber, tenho uma div (quem sabe um li) com um link.

Quando clicar nele quero que abra uma div embaixo com outro conteúdo, mas o fundo da primeira tem que acompanhar esse crescimento.

Quando clica novamente fecha. Preciso de que tenha algum efeito para deixar essa transição mais "bonita".

 

Podem me ajudar?

 

Abraço,

Giovani

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

trocar a imagenzinha ali... você pode fazer com um css sprite

<html>
<head>
	<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function(){
		$("#accordion div").hide();
		$("#accordion li > a").click(function( e ){
			e.preventDefault();
			$( this ).next('div').slideToggle();
		});
	});
	</script>
	<style>
	#accordion {
		width: 350px;
		padding: 10px;
		background: #00f;
	}
	#accordion a{
		color: #fff;
	}
	</style>
</head>
<body>
	<ul id="accordion">
		<li><a href="#">Link</a>
			<div style="background: #0f0;">
				Conteudo!!!!<br />Conteudo!!!!<br />
				Conteudo!!!!<br />Conteudo!!!!<br />
			</div>
		</li>
	</ul>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Matheus Tavares    167

Matheus Tavares
Postado

Serviria este plugin?

 

http://jquery.bassistance.de/accordion/demo/?p=1.1.1

 

O funcionamento sem plugins é basico: Você cria uma div dentro da outra, e se não estiver em uso float em suas propriedades, a div-mãe se movimentará junto com a filha.

Daí você utiliza um toggle para ao clicar no link ele tanto abrir a div filha, quanto mudar a img do link. Exemplo:

 

$('div.filha').hide();
$('a.link').click(function () {
	e.preventDefault();
	$(this).toggle(
	function () {
    		$(this).addClass('fechado');
  	},
  	function () {
    		$(this).removeClass('aberto');
  	}
	);
	$('div.filha').slideToggle('slow');
});

Apenas leia com atenção. Impossível não entender.

Crie as propriedades CSS .fechado e .aberto, cada uma com um ícone diferente para o link, e voilá.

 

Não testei, mas acho que é isso.

 

Até mais.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

Agora abusando um pouco William, como faço para quando clicar num link o outro fechar?

Muiiiiiito obrigado novamente :)

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

na verdade, o mais simples é fechar todos, e ai depois disso, abrir (ou) fechar oque você clicou.

 

fechar todos, faz um slideUp(), em todos eles.

use um .not() antes do slideUp(), para este não afetar oque você clicou, assim você não perde o toggle

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

não fique mal acostumado :P

 

<html>
<head>
	<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function(){
		$("#accordion div").hide();
		$("#accordion li > a").click(function( e ){
			e.preventDefault();
			
			$("#accordion div").not( $( this ).next('div') ).slideUp();
			$( this ).next('div').slideToggle();
		});
	});
	</script>
	<style type="text/css">
	#accordion {
		width: 350px;
		padding: 10px;
		background: #00f;
	}
	#accordion a{
		color: #fff;
	}
	</style>
</head>
<body>
	<ul id="accordion">
		<li><a href="#">Link</a>
			<div style="background: #0f0;">
				Conteudo!!!!<br />Conteudo!!!!<br />
				Conteudo!!!!<br />Conteudo!!!!<br />
			</div>
		</li>
		<li><a href="#">Link 2</a>
			<div style="background: #0f0;">
				Conteudo!!!!<br />Conteudo!!!!<br />
				Conteudo!!!!<br />Conteudo!!!!<br />
				Conteudo!!!!<br />Conteudo!!!!<br />
				Conteudo!!!!<br />Conteudo!!!!<br />
			</div>
		</li>
		<li><a href="#">Link 3</a>
			<div style="background: #0f0;">
				Conteudo!!!!<br />Conteudo!!!!<br />
				Conteudo!!!!<br />Conteudo!!!!<br />
				Conteudo!!!!<br />Conteudo!!!!<br />
				Conteudo!!!!<br />Conteudo!!!!<br />
				Conteudo!!!!<br />Conteudo!!!!<br />
				Conteudo!!!!<br />Conteudo!!!!<br />
			</div>
		</li>
	</ul>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

Obrigado Wiliam :)

Na verdade preciso criar vergonha na cara e tirar uma tempo pra estudar js!

não fique mal acostumado :P

 

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